given a content editable div. How can I detect a paste event, prevent the paste from being inserted so can I can intercept and sanitize the paste to include text only?
给定内容可编辑的div。如何检测粘贴事件，防止粘贴被插入，以便能够拦截和清除粘贴，只包含文本?
I also don't want to lose focus after the paste + sanitize is complete.
我也不想在粘贴+消毒完成后失去焦点。
1 个解决方案
#1
21
UPDATE:
更新:
All major browsers now give you access to the clipboard data in a paste event. See Nico Burns's answer for an example on newer browser and also check out Tim Down's answer if you need to support older browsers.
现在，所有主要浏览器都允许您在粘贴事件中访问剪贴板数据。看看Nico Burns在更新浏览器上的例子，如果你需要支持旧的浏览器，也可以查看Tim Down的答案。
You can listen for the onPaste event on the div to detect the paste. If you just want to disable the paste you can call event.preventDefault() from that listener.
您可以侦听div上的onPaste事件，以检测该粘贴。如果您只想禁用该粘贴，可以从该侦听器调用event.preventDefault()。
To capture the pasted content however is a little bit more difficult since the onPaste event does not give you access to the pasted content. The usual way to handle this is to do the following from the onPaste event handler:
但是要捕获已粘贴的内容有点困难，因为onPaste事件不允许您访问已粘贴的内容。通常的处理方法是通过onPaste事件处理程序执行以下操作:
- create a dummy div and place it outside the window boundaries so it's not visible to visitors
- 创建一个虚拟div，并将其放置在窗口边界之外，以免访客看到它
- move the focus to this div
- 将焦点移到此div
- call a sanitizer method using a
setTimeout(sanitize, 0) - 使用setTimeout调用sanitizer方法(sanitize, 0)
and from your sanitizing method:
从你的消毒方法:
- find the dummy div and get it's contents
- 找到伪div并获取它的内容。
- sanitize the HTML and remove the div
- 清除HTML并删除div
- move the focus back to the original div
- 将焦点移回原始div
- insert the sanitized content in the original div
- 在原始div中插入经过清理的内容
#1
21
UPDATE:
更新:
All major browsers now give you access to the clipboard data in a paste event. See Nico Burns's answer for an example on newer browser and also check out Tim Down's answer if you need to support older browsers.
现在，所有主要浏览器都允许您在粘贴事件中访问剪贴板数据。看看Nico Burns在更新浏览器上的例子，如果你需要支持旧的浏览器，也可以查看Tim Down的答案。
You can listen for the onPaste event on the div to detect the paste. If you just want to disable the paste you can call event.preventDefault() from that listener.
您可以侦听div上的onPaste事件，以检测该粘贴。如果您只想禁用该粘贴，可以从该侦听器调用event.preventDefault()。
To capture the pasted content however is a little bit more difficult since the onPaste event does not give you access to the pasted content. The usual way to handle this is to do the following from the onPaste event handler:
但是要捕获已粘贴的内容有点困难，因为onPaste事件不允许您访问已粘贴的内容。通常的处理方法是通过onPaste事件处理程序执行以下操作:
- create a dummy div and place it outside the window boundaries so it's not visible to visitors
- 创建一个虚拟div，并将其放置在窗口边界之外，以免访客看到它
- move the focus to this div
- 将焦点移到此div
- call a sanitizer method using a
setTimeout(sanitize, 0) - 使用setTimeout调用sanitizer方法(sanitize, 0)
and from your sanitizing method:
从你的消毒方法:
- find the dummy div and get it's contents
- 找到伪div并获取它的内容。
- sanitize the HTML and remove the div
- 清除HTML并删除div
- move the focus back to the original div
- 将焦点移回原始div
- insert the sanitized content in the original div
- 在原始div中插入经过清理的内容