代码之家 › 专栏 › 技术社区 › Anna_B

不粘贴富文本格式仅适用于第一个文本区域

jquery javascript

Anna_B · 技术社区 · 3 年前

如果将格式化文本粘贴到以下两个文本区域中,可以看到只有第一个文本区域没有格式化。应该是第二个,也许第三个也一样。怎么可能呢?

var editable = document.querySelector("[contenteditable]")

editable.addEventListener("paste", function(e) {
  e.preventDefault()
  var clipboard = e.clipboardData.getData("text/plain")
  document.execCommand("insertText", false, clipboard)
})

* {
  font-family: inherit;
}

div {
  font-family: Papyrus;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div contenteditable="true" spellcheck="false">One: At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

<div contenteditable="true" spellcheck="false">Two: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>

1 回复 | 直到 3 年前

charlietfl 3 年前

document.querySelector() 只返回页面中的第一个匹配项

document.querySelectorAll() 并在集合上循环,为每个集合添加一个侦听器

var editable = document.querySelectorAll("[contenteditable]");

editable.forEach(el => {
  el.addEventListener("paste", function(e) {
    e.preventDefault();
    var clipboard = e.clipboardData.getData("text/plain");  
    document.execCommand("insertText", false, clipboard);
  });
});

* {
  font-family: inherit;
}

div {
  font-family: Papyrus;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div contenteditable="true" spellcheck="false">One: At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

<div contenteditable="true" spellcheck="false">Two: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>