Question

我正在使用' contenteditable = true '来启用某些表格单元格的修改。现在我想知道用户实际编辑了页面上哪些可编辑元素，以便我可以处理更改。

虽然我可能会为此目的使用事件监听器，但这种方法在我的情况下会很乏味。页面是动态生成的，并且具有可变数量的可编辑元素。我想避免为每个可编辑元素动态添加事件监听器。

我想知道DOM是否已经有一个属性/标志来指示元素是否已更新。如果是这样，我希望有这样的解决方案：

var element_123 = document.getElementById("element_id_123");
 var was_edited = element_123.was_edited;

谢谢。

Answer 1

我认为浏览器中没有这样的内容。但是，您可以使用类似这样的内容（http://api.jquery.com/delegate/）：

$( "#didichange_tbl" ).delegate( "input", "change", function() {
  console.log("table has changed!!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <table id="didichange_tbl">
        <tr>
          <td><input/></td>
        </tr>
        <tr>
          <td><input/></td>
        </tr>
 </table>

Answer 2

我尝试了一些解决方案，我发现的最好的东西是由conradgray在coderwall.com博客上撰写的：https://coderwall.com/p/lxl3zw。我决定将文章内容添加到帖子中，以防有时原来不再存在。

这是他的解决方案：

var editable = document.getElementById('text');
editable.addEventListener('input', function() {
    console.log('Hey, somebody changed something in my text!');
});

<div id="text" contenteditable>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at arcu ac dui eleifend suscipit a ut est. Ut iaculis ut massa non accumsan. Quisque hendrerit nisl at egestas cursus.
</div>

Answer 3

您需要做的是仅将contenteditable设置为叶元素和文本节点，然后监听input事件。这样你就可以提取事件的确切来源。

document.body.addEventListener('keydown', event => {
  console.log(event.target);
});

function addContentEditable(el) {
  if (el.children.length === 0) { el.setAttribute('contenteditable', true) }
  if (el.nodeType === 3) { el.setAttribute('contenteditable', true) }
  [...el.children].forEach(c => {
    addContentEditable(c);
  });
}

addContentEditable(document.body);

<div class="pad">
  <p>Some text</p>
  <p>Some more text<a> and a link</a></p>
  <p>Even <b>more</b> text</p>
</div>

DOM属性，用于指示元素是否已更新

3 个答案: