javascript - 在 contenteditable 中检测粘贴事件

Question

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

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

Answer 1

更新:

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

---

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

然而，要捕获粘贴的内容有点困难，因为 onPaste 事件不允许您访问粘贴的内容。处理此问题的通常方法是在 onPaste 事件处理程序中执行以下操作:

• 创建一个虚拟 div 并将其放置在窗口边界之外，这样访问者就看不到了
• 将焦点移到这个 div 上
• 使用 setTimeout(sanitize, 0) 调用 sanitizer 方法

以及您的 sanitizer 方法:

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