[英]How do I prevent textContent from overwriting the dynamically created span?
[英]How do I allow a user to change span textcontent after clicking on the span element?
我正在尝试允许用户单击 span 元素并根据他们键入的内容以及原始文本内容更改文本。
container.addEventListener('click', (event) => {
if (event.target.classList.contains('targetSpan')){
targetSpanText = event.target.textContent;
document.addEventListener("keydown", (event) => {
targetSpanText.textContent += `${event.key}`;
});
}
});
textcontent 似乎没有更新,尽管 keydown 事件侦听器正在工作。
在这种情况下,使用contenteditable
属性似乎很合适:
/* 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>
这是第二个示例( 由此评论提示),带有用于切换纯文本模式模拟的复选框控件:
const span = document.getElementById('text'); const input = document.querySelector('#toggle'); const setPlaintext = () => { span.textContent = span.textContent; }; const update = () => { if (input.checked) setPlaintext(); }; input.addEventListener('change', update); span.addEventListener('input', update);
/* Just some styles for this snippet */ body { font-family: sans-serif; } #text { background-color: hsla(0, 0%, 50%, 0.15); font-size: 1.5rem; padding: 0.25rem; }
<label><input id="toggle" type="checkbox" /> plaintext</label> <span id="text" contenteditable="true">You can type here</span>
我认为建议使用文档的 getElementById() 方法来操作 span 标记的内容。 看来您的代码没有使用它。 为什么您可能得不到预期的结果。
这篇文章中有几个更改 span 元素中的文本的示例如何使用 JavaScript 更改 span 元素的文本?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.