html 如何允许用户在单击span元素后更改span textcontent?

oalqel3c  于 2023-01-11  发布在  其他
关注(0)|答案(2)|浏览(158)

我尝试允许用户单击span元素,并根据他们键入的内容沿着原始的textcontent来更改文本。

container.addEventListener('click', (event) => {
   if (event.target.classList.contains('targetSpan')){
                targetSpanText = event.target.textContent;
                document.addEventListener("keydown", (event) => {
                    targetSpanText.textContent += `${event.key}`;
                });
            }
        });

虽然keydown事件侦听器正在工作,但textcontent似乎没有更新。

6tr1vspr

6tr1vspr1#

使用contenteditable attribute似乎适合这种情况:

/* Just some styles for this snippet */ .targetSpan { background-color: hsla(0, 0%, 50%, 0.15); font-family: sans-serif; font-size: 1.5rem; padding: 0.25rem; }
<span class="targetSpan" contenteditable="plaintext-only">You can type here</span>

下面是第二个示例(由此注解提示),其中包含用于切换模拟明文模式的checkbox控件:
一个一个二个一个一个一个三个一个一个一个一个一个四个一个

0yycz8jy

0yycz8jy2#

我认为建议使用document的getElementById()方法来操作span标签的内容。看起来你的代码没有使用它。为什么你可能没有得到你期望的结果。
在这篇文章How do I change the text of a span element using JavaScript?中有几个改变span元素中的文本的例子

相关问题