How can you catch a contentEditable paste event?

2019-04-25 10:03发布

问题:

I've got a great editable text area going with wysihat and contentEditable. I really need a way to intercept paste events to either stop them, or process their DOM before allowing insertion. It's a little crazy they people can paste entire webpages into the editable areas.

Is this possible?

Come on future, arrive on my doorstep. HTML5 gurus, fire!

回答1:

You can't access the content's that will be inserted.

What you can do is add an event listener that runs some cleanup code on Ctrl+V (with a timeout, so it sees the pasted text)



回答2:

the onpaste event works fine, at least u can reject user insert behavior

someElement.onpaste = function() {
   // doSomething()
   return false; // to prevent user insert
}


回答3:

The textInput event fires before the text is pasted, and is compatible with both ctrl+v and other ways of pasting text (like context menu's etc), it also has a property called .data which should/may hold the contents being pasted, but I've not seen this populated yet in browsers which do support the textInput event.

However, the input event fires /after/ the paste (when the dom has already changed), so I guess some coupling of the two of these could work in the interim.

Or.. you could just use the paste event ;)