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);
});

我有这个小提琴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

Answer 2

如果你习惯了jQuery，你可能会认为document.querySelector()履行了同样的功能;但是，它只返回与选择器匹配的第一个元素;相反，您应该使用document.querySelectorAll()，然后使用迭代来添加事件处理程序。

由于您已将其标记为jquery，因此您也可以考虑这一点：

＆＃13;

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

＆＃13;

div[contenteditable] {
    height: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="color:blue">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>

＆＃13;

我在这里使用e.originalEvent因为jQuery在事件处理程序中传递给你的是一个包装器对象。

Answer 3

这是因为document.querySelector仅返回第一个匹配的元素。您可以使用document.querySelectorAll代替。希望它可以帮助您。

javascript如何粘贴＆＃34;作为纯文本＆＃34;在多个领域或元素中

3 个答案: