获取在内容可编辑中更改的元素

Get element being changed in contenteditable

本文关键字：元素 编辑 获取      更新时间：2023-09-26

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

.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>

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>

您必须对计划修改的每个片段分别影响 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>

相关文章：