javascript - 如何在编辑文本后更改 html 元素

Question

当您更改 nameDiv 的内容时，我有这段代码应该更改表格位置的内容，即 var nameDiv = document.createElement(' div'); (nameDiv.contentEditable = "true";) 它有一些文本

 nameDiv.onclick = event => {
            allSectionsArray[sectionNumber][2] = event.value;
 }

基本上这里发生的事情是:它会在我点击 div 时更新，而不是在输入一些文本后更新。

我想要的是:输入文本后保存更改。有没有 onclick 的替代品或我可以实现此目的的任何其他方法？

Answer 1

对于 contenteditable，您可以使用 input事件:

The input event fires when the value of an input element has been changed.

contenteditable 不支持change 事件，但您可以使用 blur事件而不是哪个

fires when an element has lost focus

const example = document.querySelector("#example");

example.addEventListener("blur", ()=>{
  console.log(`Value is: ${example.textContent}`);
});

#example {
  border: solid 1px #000;
  padding: 5px;
}

<div id="example" contenteditable></div>

---

您还可以浏览完整的事件列表 here .