javascript 如何在多个字段或元素中粘贴 "as plain text"

Question

我尝试将文本粘贴到多个字段中，但只清除了第一个元素的格式，而不是第二个元素等。

我发现了这个问题 https://stackoverflow.com/a/12028136/3955607这工作正常，但同样，在多个元素上它不起作用。

所以我得到了这个 HTML

<div style="color:red">Some <em>rich</em> <span style="font-size:2em">HTML</span></div>
<br />
<div style="border:1px solid red" contenteditable></div>
<br />
<div style="border:1px solid red" contenteditable></div>

和这个 javascript:

document.querySelector("div[contenteditable]").addEventListener("paste", function(e) {
   e.preventDefault();
   var text = e.clipboardData.getData("text/plain");
   document.execCommand("insertHTML", false, text);
});

我有这个 fiddle http://jsfiddle.net/tdjuc8es/

只需复制并粘贴 Some rich HTML- 文本，看看会发生什么

谁能帮帮我？

Answer 1

document.querySelector 产生一个元素。您想要使用 document.querySelectorAll 获取所有匹配元素，然后迭代该集合。

var editors = document.querySelectorAll('div[contenteditable]');
for(var i = 0, l = editors.length; i < l; i++) {
   editors[i].addEventListener('paste', myCustomPasteFunction);
}

Fiddle