获取在contenteditable中被更改的元素

Question

如何获取正在编辑的元素？

HTML

<div contenteditable=true>
  <pre>
    <span class="1">First line</span>
    <span class="2">Second line</span>
  </pre>
</div>

在编辑“第一行”时，如何检查正在编辑的跨度类？

JS

window.addEventListener("input", inputHandler, false);
function inputHandler(e) {
  console.log(e.target);
}

打印出整个div类：

<div contenteditable=true>
  <pre>
    <span class="1">First line</span>
    <span class="2">Second line</span>
  </pre>
</div>

但我只想获取<span class="1">First line</span>

Answer 1

Span element不能具有input/keypress/keyup ... events并且这些events也不能在其上注册。 虽然有其他的方法来做到这一点，你可以选择使用DOMCharacterDataModified事件，请检查下面的代码片段 。

 var div = document.getElementById("edit"); div.addEventListener("DOMCharacterDataModified", inputHandler, false); function inputHandler(e) { var elem = e.target.parentNode; alert("Element: " + elem.tagName + " class name: " + elem.className); } 

 <div id="edit" contenteditable=true> <pre> <span class="1">First line</span> <span class="2" >Second line</span> </pre> </div> 

Answer 2

您必须对计划修改的每个部分分别影响contenteditable属性。
您必须选择如何向所有事件监听器添加事件监听器。 例如，像这样：

 var editables = document.getElementsByClassName('editable'); for (var editable of editables) { editable.addEventListener("input", inputHandler, false); } function inputHandler(e) { console.log(e.target); } 

 <div> <pre> <span class="editable 1" contenteditable>First line</span> <span class="editable 2" contenteditable>Second line</span> </pre> </div>