單擊跨度元素后如何允許用戶更改跨度文本內容？

Question

我正在嘗試允許用戶單擊 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 事件偵聽器正在工作。

Answer 1

在這種情況下，使用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>

Answer 2

我認為建議使用文檔的 getElementById() 方法來操作 span 標記的內容。 看來您的代碼沒有使用它。 為什么您可能得不到預期的結果。

這篇文章中有幾個更改 span 元素中的文本的示例如何使用 JavaScript 更改 span 元素的文本？