有什么方法可以防止将html div的内容或带有样式的文本输入到剪贴板吗？

Question

示例：

<div id="184" style="position: relative;" class="EditBox" tabindex="0" contenteditable="true">SomeText</div>

我想要实现的是用户复制文本时，防止复制其样式。有没有一种使用DOM或javascript的方法或任何可能的方法？

Answer 1

使用innerText和textContent获得复制的文本

let text = document.getElementById("184").innerText || document.getElementById("184").textContent;

document.getElementById("185").textContent = document.getElementById("184").innerText || document.getElementById("184").textContent;

.EditBox{
 color: blue;
}

<div id="184" style="position: relative;" class="EditBox" tabindex="0" contenteditable="true">SomeText</div>

<div id="185" ></div>

Answer 2

我通过在div或输入中添加事件侦听器来解决此问题，该侦听器会拦截复制命令，而是复制纯文本而不是html样式：

document.querySelector("div[contenteditable]").addEventListener('copy', function(e) {
alert('Copied');
   e.clipboardData.setData('text/plain', 'Hello! Welcome');
   e.preventDefault();
 });