Javascript Contenteditable仅允许纯文本

我正在尝试使contenteditable只接受纯文本

我想要的是监听粘贴事件，然后删除所有html并将其粘贴到contenteditable上，仅作为纯文本

为了做到这一点，我已经尝试了两种不同的方法，基于对类似问题的回答，但这两种方法都有问题

第一名： 这不是使用“粘贴”侦听器，而是侦听输入（在这种情况下并不理想），这是一种避免使用的解决方案

问题：这在chrome上运行良好，但在firefox和IE上不起作用。当您复制和粘贴html时，它会成功删除html并仅粘贴文本，但在继续编写文本时，插入符号总是带到contenteditable的开头

函数convertToPlaintext（）{
var textContent=this.textContent；
this.textContent=textContent；
}
var contentEditableNodes=document.querySelectorAll（'.plaintext[contenteditable]'）；
[]forEach.call（contentEditableNodes，函数（div）{
div.addEventListener（“输入”，convertToPlaintext，false）；
});

您可以在此处尝试/我基于的代码：

秒： 因为第一个失败了，并且没有只听“粘贴”事件，所以我决定使用。 这里的问题是在IE document.execCommand（“insertHTML”，false，text）上；似乎不起作用。 这适用于chrome、firefox（在v41和v42上测试）和edge

document.querySelector（“.plaintext[contenteditable]”）。addEventListener（“粘贴”，函数（e）{
e、 预防默认值（）；
var text=“”；
if（e.clipboardData&&e.clipboardData.getData）{
text=e.clipboardData.getData（“text/plain”）；
}else if（window.clipboardData&&window.clipboardData.getData）{
text=window.clipboardData.getData（“text”）；
}
document.execCommand（“insertHTML”，false，text）；
});

您可以在这里尝试：

有人能帮我找到解决这些问题的方法吗？或者有人有比这里介绍的更好的方法吗

我知道我可以使用textarea，但我有理由不使用它。

使用元素而不是contentEditable元素：（强调我的）

textarea

元素表示多行纯文本编辑 控件获取元素的原始值

例如：

/*自动调整高度大小*/
var textarea=document.querySelector（'textarea'）；
（textarea.oninput=函数（）{
textarea.style.height=0；
textarea.style.height=textarea.scrollHeight+'px'；
})();
textarea{width:100%；}
你好！你可以编辑我的内容。但是只有纯文本清除粘贴数据的脏黑客

function onpaste(e, el){
      setTimeout(function(){
            el.innerText = el.innerText;
        }, 10);
}

谢谢，但我尽量避免使用textarea，因为我想要一个在用户输入文本时自动增长/自动调整大小的文本区域，而不需要外部依赖项，甚至那些依赖项也被证明不能很好地工作。@Marina自动调整textarea的大小可能比劫持粘贴要容易得多。再次感谢您的回答，但我选择了可以在问题更新中找到的解决方案。原因是为了避免每次用户输入内容时重新绘制页面：想说您发现的解决方案存在漏洞。我试着把“”粘贴到你给的小提琴上，它显示了textarea。我不知道是否还有其他可以粘贴为HTML的HTML元素，没有进一步检查。@toremato文本区域是由fiddle代码创建的。在文本区域内写入
不应创建另一个文本区域。如果发生这种情况，那就是你的浏览器出现了严重的错误。我使用了你的第二种方法。（我建议您自己回答，并将其标记为正确）。我需要一个改变，也就是检查
else，如果（ev.originalEvent.clipboardData…
当
ev.clipboardData
未设置时。很好的解决方案！请记住，通过拖放，您仍然可以向您的区域添加HTML内容。出于我的目的，只需禁用拖放就可以了。这方面的API很钝，但您可以执行以下操作：
函数blockDragDrop（ev）{ev.dataTransfer.effectAllowed='none'；ev.dataTransfer.dropEffect='none'；ev.preventDefault（）；return false；}el.addEventListener（'dragstart'，blockDragDrop）；el.addEventListener（'dragover'，blockDragDrop）；
（如果需要，别忘了从@Tormato即将删除的“应答”中删除事件）：“我想说你找到的解决方案有漏洞。我尝试将
“”“
”粘贴到你提供的提琴中，它显示了textarea。我不知道是否还有其他HTML元素可以粘贴为HTML，没有进一步检查。”此外，回答（即使是你自己的问题）应该作为答案发布，而不是作为问题的编辑。太好了！您如何使其不在插入符号周围移动？