Coding with Jesse


November 10th, 2005

Working with designMode="on" or contentEditable (what can we call this? I want to say Rich Text Editors or Midas Editors Web-Based HTML Editors or something. We don't really have a nice buzzword for this..), a common problem is dealing with pasted content. The user can paste any HTML into these areas, and more often than not, web applications don't want form elements or IFrames or other HTML included in the content.

It's not so difficult to process the innerHTML of a document to strip out bad HTML using regular expressions. The problem is, when can this cleaning happen?

Mozilla has no paste events at all. Internet Explorer has onBeforePaste and onPaste events, but no onAfterPaste. onPaste fires when the user pastes, but before the HTML actually goes into the editor. The idea is that the developer has a chance to look into the clipboard using window.clipboardData.getData(). Unfortunately, you can only retrieve the contents in URL or Text format, not HTML. Instead, it would be easier to allow the HTML to be pasted, then process the editor contents afterwards.

To accomplish this in Internet Explorer, we can simply set a timeout in the onPaste event. This works by allowing the browser time to finish its internal onPaste event before executing the code in the timeout. The onPaste event needs to be attached to the BODY of the editor IFrame using designMode, or the DIV element when using contentEditable.

function onPasteHandler(e) {
     setTimeout(function() {
          // editor cleaning code goes here
     }, 1); // 1ms should be enough

In Firefox, we can't use paste events. However, probably the best we can do is set a keypress handler and look for CTRL+V or SHIFT+INSERT and then do the same thing with a timeout. The keypress event handler needs to be attached to the document element in the IFrame.

function onKeyPressHandler(e) {
     if ((e.ctrlKey && e.keyCode == e.DOM_VK_V)
      || (e.shiftKey && e.keyCode == e.DOM_VK_INSERT)) {
          setTimeout(function() {
               // editor cleaning code goes here
          }, 1);

This should only work with Mozilla/Firefox because e.DOM_VK_V and e.DOM_VK_INSERT are not defined in Internet Explorer.

Also note that there are still other ways to get HTML into the editor through Drag-and-Drop, or by using Edit>Paste on the Firefox menu. If you are serious about stripping HTML you will need to do it at other times as well. At least this way it will happen quickly enough that the editor won't misleadingly contain these elements, only to strip them out at an unpredictable time in the future.


1 . Miguel on July 13rd, 2006


Hi Jesse!

Opera 9 cleans the MSWord trash code when you paste it in a RTF editor...

This navigator has a onAfterPaste event?

2 . Justin Taylor on September 25th, 2006

Justin Taylor

Just to let you know, Mozilla supports an onInput event which can be used for pasting. It is conveniently launched AFTER the data is pasted in to a field.

3 . Argo on January 1st, 2008


how about the paste command in oncontextmenu event?

4 . Albert Horta on March 20th, 2008

Albert Horta


Creating custom code for pasting requires several steps:

1. Set event.returnValue=false in the onbeforepaste event to enable the Paste shortcut menu item.
2. Cancel the default behavior of the browser by including event.returnValue=false in the onpaste event handler. This guideline applies only to objects, such as the text box, that have a defined default behavior.
3. Specify a data format in which to paste the selection through the getData method of the clipboardData object.
4. Invoke the getData method in the onpaste event to execute custom code for pasting.

5 . Brian Perrin on June 4th, 2008

Brian Perrin

Wow, this is the best discussion on this topic I've seen anywhere on the Web -- and there are hundreds and hundreds of posts on the subject.

Nice work, Jesse -- and great, thoughtful comments from everyone.

p.s.: I agree we need a clear name for these things. My two cents: I like "Rich Text Editors" (RTEs?) or "Web-Based HTML Editors."

6 . fabiomcosta on September 13rd, 2008


Thank you so much! that was exactly what i was looking for... haha i spent last night trying to figure out how to catch the input value on the paste event...trying to get the value from the clipboard...but it doenst work on safari and chrome...
good job!

7 . Hisny on October 21st, 2008


Excellent solution , Really appreciate it

8 . Tom Kuo on July 31st, 2009

Tom Kuo

The oninput solution only works if you're working with a textarea. If you have a div with contentEditable enabled you still have this problem

9 . Randy on March 18th, 2010


While IE doesn't allow you to get at the HTML content contained in the clipboardData, it does allow you to remove it altogether. See the following:

//-- Capture the text in the clipboard
var txt = window.clipboardData.getData('Text');
//-- clear the contents of the text portion
//-- clear the HTML contents
//-- add the text back to the clipboard
window.clipboardData.setData('Text', txt);

The idea is that you can clear any formatting contained in the clipboard (which, with Windows and IE, can be quite a bit).

I believe Mozilla and Webkit browsers both support the onPaste event. Like you said, IE only supports this event on the body of the editable region (not the iFrame). Mozilla and Webkit browsers support it on the iFrame itself.

Good article though. Wish I had come across this several weeks ago... would have saved me a lot of headaches. Guess my Google skills are lacking.

10 . Arkadaşlık Sitesi on August 21st, 2010

Arkadaşlık Sitesi

I believe Mozilla and Webkit browsers both support the onPaste event. Like you said, IE only supports this event on the body of the editable region (not the iFrame). Mozilla and Webkit browsers support it on the iFrame itself

Comments are closed, but I'd still love to hear your thoughts.