在contenteditable中检测粘贴事件

Question

给出内容可编辑的div。如何检测粘贴事件，防止粘贴被插入，以便我可以拦截和清理粘贴以仅包含文本？

我也不想在粘贴+清理完成后失去焦点。

Answer 1

更新：

现在，所有主流浏览器都允许您在粘贴事件中访问剪贴板数据。有关较新浏览器的示例，请参阅Nico Burns's answer，如果您需要支持较旧的浏览器，请查看Tim Down's answer。

---

您可以在div上侦听onPaste事件以检测粘贴。如果您只想禁用粘贴，可以从该侦听器调用event.preventDefault()。

要捕获粘贴的内容，但有点困难，因为onPaste事件无法访问粘贴的内容。处理此问题的常用方法是从onPaste事件处理程序执行以下操作：

• 创建一个虚拟div并将其放置在窗口边界之外，以便访问者看不到它
• 将焦点移至此div
• 使用setTimeout(sanitize, 0)
调用清洁方法

并从您的消毒方法中获取：

• 找到虚拟div并获取它的内容
• 清理HTML并删除div
• 将焦点移回原来的div
• 将已清理的内容插入原始div