• onAfterPaste

    Nov 10 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.

  • Comments

    1. Miguel at 10:27am on July 13, 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 at 9:01pm on September 25, 2006

    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 at 7:58am on January 1, 2008

    how about the paste command in oncontextmenu event?

    4. Albert Horta at 5:36am on March 20, 2008

    NOTE : DON'T FORGET THIS

    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 at 7:00pm on June 4, 2008

    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 at 10:25am on September 13, 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 at 11:57am on October 21, 2008

    Excellent solution , Really appreciate it

    8. Tom Kuo at 1:58pm on July 31, 2009

    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 at 6:02pm on March 18, 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
    window.clipboardData.clearData('Text')
    //-- clear the HTML contents
    window.clipboardData.clearData('HTML');
    //-- 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 at 12:25pm on August 21, 2010

    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

    Commenting is now closed. Come find me on Twitter.