CODEWITHSUNDEEP
javascripthtmlcontenteditablepastewysihat
mixonic
mixonic

Reputation: 2703

How can you catch a contentEditable paste event?

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!

Upvotes: 7

Views: 4258

Answers (3)

brookslee
brookslee

Reputation: 195

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

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

Upvotes: 2

nathan
nathan

Reputation: 5452

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 ;)

Upvotes: 1

Niko Sams
Niko Sams

Reputation: 4404

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)

Upvotes: 3

Related Questions