檢測給定內容可編輯div的contenteditable

中的粘貼事件。如何檢測粘貼事件，防止粘貼被插入，這樣我可以攔截和清理粘貼以僅包含文本？檢測給定內容可編輯div的contenteditable

粘貼+清潔完成後，我也不想失去焦點。

想法？由於

2011-11-19 Rachela Meadows

會是什麼有用的將是一個基金會在發生粘貼事件之前捕獲粘貼事件，進行消毒，然後將安全內容注入到可編輯的內容中，而不會丟失光標位置。想法？ –

IE，Safari和Chrome允許訪問剪貼板中的數據，但您必須爲Firefox提供一個解決方法。如果可行的話，更簡單的辦法是隻允許粘貼，然後在事實之後清理整個元素的內容。這會起作用嗎？ – sdleihssirhc

有一個哈希的方式來做到這一點，我以前發佈：http://stackoverflow.com/questions/2176861/javascript-get-clipboard-data-on-paste-event-cross-browser/2177059#2177059，http ：//stackoverflow.com/questions/4365833/how-can-i-get-the-text-that-is-going-to-be-pasted-in-my-html-text-editor/4365862#4365862 –

UPDATE：

所有的主流瀏覽器現在給你訪問到剪貼板中的數據粘貼事件。如果您需要支持舊瀏覽器，請參閱Nico Burns's answer以查看較新瀏覽器的示例，並查看Tim Down's answer。

您可以偵聽div上的onPaste事件來檢測粘貼。如果你只是想禁用粘貼，你可以從該監聽器調用event.preventDefault()。

但是，要捕獲粘貼的內容會有點困難，因爲onPaste事件不會讓您訪問粘貼的內容。處理這種情況通常的方法是從做onPaste事件處理程序如下：

創建一個虛擬的div並將其放置在窗口邊界之外，所以它不是可見的遊客
將焦點移到該div
呼叫使用setTimeout(sanitize, 0)

，並從你的消毒方法消毒劑方法：

找到虛擬股利和獲得它的內容
消毒HTML和刪除DIV
將焦點移回到原來的div
插入消毒的內容在原來的div

來源

2011-11-19 07:46:14 dcro

The 'paste'事件在某些瀏覽器中做這種重定向已經太遲了，但總的想法起作用。 –

這是另一個非常流行的解決方案，已經過測試跨瀏覽器http://stackoverflow.com/questions/2176861/javascript-get-clipboard-data-on-paste-event-cross-browser – yoshyosh

檢測給定內容可編輯div的contenteditable

回答

相關問題