JavaScript get clipboard data on paste event Cross browser

Question

How can a web application detect a paste event and retrieve the data to be pasted   I would like to remove HTML content before the text is pasted into a rich text editor   Cleaning the text after being pasted afterwards works  but the problem is that all previous formatting is lost  For example  I can write a sentence in the editor and make it bold  but when I paste new text  all formatting is lost  I want to clean just the text that is pasted  and leave any previous formatting untouched   Ideally  the solution should work across all modern browsers  e g   MSIE  Gecko  Chrome  and Safari    Note that MSIE has clipboardData getData    but I could not find similar functionality for other browsers

User · Answer

You can do this in this way   use this jQuery plugin for pre  amp  post paste events     fn pasteEvents   function  delay         if  delay    undefined  delay   20      return   this  each function             var  el     this            el on  paste   function                  el trigger  prepaste                setTimeout function      el trigger  postpaste       delay                            Now you can use this plugin        txt   on  prepaste   function             this  find      each function             var tmp new Date getTime              this  data  uid  tmp                pasteEvents         txt   on  postpaste   function            this  find      each function          if    this  data  uid               this  removeClass                this  removeAttr  style id                       pasteEvents      Explaination  First set a uid for all existing elements as data attribute   Then compare all nodes POST PASTE event  So by comparing you can identify the newly inserted one because they will have a uid  then just remove style class id attribute from newly created elements  so that you can keep your older formatting

User · Answer

This is an existing code posted above but I have updated it for IE s  the bug was when the existing text is selected and pasted will not delete the selected content  This has been fixed by the below code  selRange deleteContents       See complete code below      contenteditable    on  paste   function  e        e preventDefault         if  window clipboardData            content   window clipboardData getData  Text                    if  window getSelection                var selObj   window getSelection                var selRange   selObj getRangeAt 0               selRange deleteContents                                selRange insertNode document createTextNode content                    else if  e originalEvent clipboardData            content    e originalEvent    e  clipboardData getData  text plain            document execCommand  insertText   false  content

User · Answer

This was too long for a comment on Nico s answer  which I don t think works on Firefox any more  per the comments   and didn t work for me on Safari as is   Firstly  you now appear to be able to read directly from the clipboard  Rather than code like   if   text  plain  test e clipboardData types            shouldn t this be writing to elem value for text plain anyway      elem innerHTML   e clipboardData getData  text plain        use   types   e clipboardData types  if    types instanceof DOMStringList   amp  amp  types contains  text plain             text  plain  test types             shouldn t this be writing to elem value for text plain anyway      elem innerHTML   e clipboardData getData  text plain        because Firefox has a types field which is a DOMStringList which does not implement test   Next Firefox will not allow paste unless the focus is in a contenteditable true field   Finally  Firefox will not allow paste reliably unless the focus is in a textarea  or perhaps input  which is not only contenteditable true but also    not display none not visibility hidden not zero sized   I was trying to hide the text field so I could make paste work over a JS VNC emulator  i e  it was going to a remote client and there was no actually textarea etc to paste into   I found trying to hide the text field in the above gave symptoms where it worked sometimes  but typically failed on the second paste  or when the field was cleared to prevent pasting the same data twice  as the field lost focus and would not properly regain it despite focus    The solution I came up with was to put it at z-order  -1000  make it display none  make it as 1px by 1px  and set all the colours to transparent  Yuck   On Safari  you the second part of the above applies  i e  you need to have a textarea which is not display none

User · Answer

First that comes to mind is the pastehandler of google s closure lib http   closure-library googlecode com svn trunk closure goog demos pastehandler html

User · Answer

Just let the browser paste as usual in its content editable div and then after the paste swap any span elements used for custom text styles with the text itself   This seems to work okay in internet explorer and the other browsers I tried         contenteditable    on  paste   function  e        setTimeout function                e target  children  span   each function                    this  replaceWith   this  text                        0         This solution assumes that you are running jQuery and that you don t want text formatting in any of your content editable divs     The plus side is that it s super simple

User · Answer

function myFunct  e        e preventDefault         var pastedText   undefined      if  window clipboardData  amp  amp  window clipboardData getData        pastedText   window clipboardData getData  Text       else if  e clipboardData  amp  amp  e clipboardData getData        pastedText   e clipboardData getData  text plain         work with text    document onpaste   myFunct

User · Answer

dom   on  paste  function  e       setTimeout function            console log e currentTarget value         0

User · Answer

Solution that works for me is adding event listener to paste event if you are pasting to a text input  Since paste event happens before text in input changes  inside my on paste handler I create a deferred function inside which I check for changes in my input box that happened on paste   onPaste  function         var oThis   this      setTimeout function        Defer until onPaste   is done         console log  paste   oThis input value              Manipulate pasted input        1

User · Answer

This solution is replace the html tag  it s simple and cross-browser  check this jsfiddle  http   jsfiddle net tomwan cbp1u2cx 1   core code   var  plainText       plainText    var  linkOnly       linkOnly    var  html       html      plainText on  paste   function  e        window setTimeout function               plainText html removeAllTags replaceStyleAttr  plainText html              0         linkOnly on  paste   function  e        window setTimeout function               linkOnly html removeTagsExcludeA replaceStyleAttr  linkOnly html              0        function replaceStyleAttr  str        return str replace    lt   w W     style    w W    gt   g  function  a  b  c  d            return b    style replace    d             function removeTagsExcludeA  str        return str replace   lt        a   w    s   w W    gt  g          function removeAllTags  str        return str replace   lt      w   s   w W    gt  g           notice  you should do some work about xss filter on the back side because this solution cannot filter strings like   lt  lt

User · Answer

Simple solution   document onpaste   function e        var pasted   e clipboardData getData  Text        console log pasted

User · Answer

Solution  1  Plain Text only and requires Firefox 22   Works for IE6   FF 22   Chrome  Safari  Edge  Only tested in IE9   but should work for lower versions  If you need support for pasting HTML or Firefox  lt   22  see Solution  2  HTML  lt div id  editableDiv  contenteditable  true  gt Paste lt  div gt   JavaScript function handlePaste  e        var clipboardData  pastedData          Stop data actually being pasted into div     e stopPropagation        e preventDefault            Get pasted data via clipboard API     clipboardData   e clipboardData    window clipboardData      pastedData   clipboardData getData  Text                Do whatever with pasteddata     alert pastedData      document getElementById  editableDiv   addEventListener  paste   handlePaste    JSFiddle  https   jsfiddle net swL8ftLs 12  Note that this solution uses the parameter  Text  for the getData function  which is non-standard  However  it works in all browsers at the time of writing   Solution  2  HTML and works for Firefox  lt   22  Tested in IE6   FF 3 5   Chrome  Safari  Edge HTML  lt div id  div  contenteditable  true  gt Paste lt  div gt   JavaScript var editableDiv   document getElementById  editableDiv     function handlepaste  e        var types  pastedData  savedContent              Browsers that support the  text html  type in the Clipboard API  Chrome  Firefox 22       if  e  amp  amp  e clipboardData  amp  amp  e clipboardData types  amp  amp  e clipboardData getData                            Check for  text html  in types list  See abligh s answer below for deatils on            why the DOMStringList bit is needed  We cannot fall back to  text plain  as            Safari Edge don t advertise HTML data even if it is available         types   e clipboardData types          if    types instanceof DOMStringList   amp  amp  types contains  quot text html quot        types indexOf  amp  amp  types indexOf  text html       -1                             Extract data and pass it to callback             pastedData   e clipboardData getData  text html                processPaste editableDiv  pastedData                   Stop the data from actually being pasted             e stopPropagation                e preventDefault                return false                              Everything else  Move existing element contents to a DocumentFragment for safekeeping     savedContent   document createDocumentFragment        while editableDiv childNodes length  gt  0            savedContent appendChild editableDiv childNodes 0                      Then wait for browser to paste content into it and cleanup     waitForPastedData editableDiv  savedContent       return true     function waitForPastedData  elem  savedContent            If data has been processes by browser  process it     if  elem childNodes  amp  amp  elem childNodes length  gt  0                    Retrieve pasted content via innerHTML             Alternatively loop through elem childNodes or elem getElementsByTagName here          var pastedData   elem innerHTML                      Restore saved content         elem innerHTML    quot  quot           elem appendChild savedContent                       Call callback         processPaste elem  pastedData                     Else wait 20ms and try again     else           setTimeout function                  waitForPastedData elem  savedContent             20            function processPaste  elem  pastedData           Do whatever with gathered data      alert pastedData       elem focus          Modern browsers  Note  3rd argument is required for Firefox  lt   6 if  editableDiv addEventListener        editableDiv addEventListener  paste   handlepaste  false        IE  lt   8 else       editableDiv attachEvent  onpaste   handlepaste      JSFiddle  https   jsfiddle net nicoburns wrqmuabo 23  Explanation The onpaste event of the div has the handlePaste function attached to it and passed a single argument  the event object for the paste event  Of particular interest to us is the clipboardData property of this event which enables clipboard access in non-ie browsers  In IE the equivalent is window clipboardData  although this has a slightly different API  See resources section below   The handlepaste function  This function has two branches  The first checks for the existence of event clipboardData and checks whether it s types property contains  text html   types may be either a DOMStringList which is checked using the contains method  or a string which is checked using the indexOf method   If all of these conditions are fulfilled  then we proceed as in solution  1  except with  text html  instead of  text plain   This currently works in Chrome and Firefox 22   If this method is not supported  all other browsers   then we  Save the element s contents to a DocumentFragment Empty the element Call the waitForPastedData function   The waitforpastedata function  This function first polls for the pasted data  once per 20ms   which is necessary because it doesn t appear straight away  When the data has appeared it   Saves the innerHTML of the editable div  which is now the pasted data  to a variable Restores the content saved in the DocumentFragment Calls the  processPaste  function with the retrieved data   The processpaste function  Does arbitrary things with the pasted data  In this case we just alert the data  you can do whatever you like  You will probably want to run the pasted data through some kind of data sanitising process   Saving and restoring the cursor position In a real sitution you would probably want to save the selection before  and restore it afterwards  Set cursor position on contentEditable  lt div gt    You could then insert the pasted data at the position the cursor was in when the user initiated the paste action  Resources   MDN paste event  https   developer mozilla org en-US docs Web Events paste MSDN clipboard  https   msdn microsoft com en-us library ms535220 v vs 85  aspx MDN DocumentFragment  https   developer mozilla org en docs Web API DocumentFragment MDN DomStringList  https   developer mozilla org en docs Web API DOMStringList  Thanks to Tim Down to suggesting the use of a DocumentFragment  and abligh for catching an error in Firefox due to the use of DOMStringList instead of a string for clipboardData types

User · Answer

The situation has changed since writing this answer  now that Firefox has added support in version 22  all major browsers now support accessing the clipboard data in a paste event  See Nico Burns s answer for an example   In the past this was not generally possible in a cross-browser way  The ideal would be to be able to get the pasted content via the paste event  which is possible in recent browsers but not in some older browsers  in particular  Firefox  lt  22    When you need to support older browsers  what you can do is quite involved and a bit of a hack that will work in Firefox 2   IE 5 5  and WebKit browsers such as Safari or Chrome  Recent versions of both TinyMCE and CKEditor use this technique    Detect a ctrl-v   shift-ins event using a keypress event handler In that handler  save the current user selection  add a textarea element off-screen  say at left -1000px  to the document  turn designMode off and call focus   on the textarea  thus moving the caret and effectively redirecting the paste Set a very brief timer  say 1 millisecond  in the event handler to call another function that stores the textarea value  removes the textarea from the document  turns designMode back on  restores the user selection and pastes the text in    Note that this will only work for keyboard paste events and not pastes from the context or edit menus  By the time the paste event fires  it s too late to redirect the caret into the textarea  in some browsers  at least    In the unlikely event that you need to support Firefox 2  note that you ll need to place the textarea in the parent document rather than the WYSIWYG editor iframe s document in that browser

User · Answer

Simple version   document querySelector   contenteditable    addEventListener  paste    e    gt        e preventDefault        const text    e originalEvent    e  clipboardData getData  text plain        window document execCommand  insertText   false  text         Using clipboardData  Demo   http   jsbin com nozifexasu edit js output  Edge  Firefox  Chrome  Safari  Opera tested     Document execCommand   is obsolete now     Note  Remember to check input output at server-side also  like PHP strip-tags

User · Answer

For cleaning the pasted text and replacing the currently selected text with the pasted text the matter is pretty trivial    lt div id  div  contenteditable  true  onpaste  handlepaste this  event   gt Paste lt  div gt    JS   function handlepaste el  e      document execCommand  insertText   false  e clipboardData getData  text plain       e preventDefault

User · Answer

This one does not use any setTimeout     I have used this great article to achieve cross browser support     document  on  focus    input type text  textarea   function  e        var t   e target      if     t  data  EventListenerSet                get length of field before paste         var keyup   function                    this  data  lastLength     this  val   length                        t  data  lastLength     t  val   length             catch paste event         var paste   function                    this  data  paste   1    Opera 11 11                       process modified data  if paste occured         var func   function                  if    this  data  paste                      alert this value substr   this  data  lastLength                        this  data  paste   0                   this value   this value substr 0    this  data  lastLength                       t  data  lastLength     t  val   length                                    if  window addEventListener                t addEventListener  keyup   keyup  false               t addEventListener  paste   paste  false               t addEventListener  input   func  false                     else    IE             t attachEvent  onkeyup   function                      keyup call t                               t attachEvent  onpaste   function                      paste call t                               t attachEvent  onpropertychange   function                      func call t                                       t  data  EventListenerSet   1                This code is extended with selection handle before paste  demo

User · Answer

Based on l2aelba anwser  This was tested on FF  Safari  Chrome  IE  8 9 10 and 11           editText   on  paste   function  e            e preventDefault             var text          var clp    e originalEvent    e  clipboardData          if  clp     undefined    clp     null                text   window clipboardData getData  text                      if  text                           if  window getSelection                        var newNode   document createElement  span                        newNode innerHTML   text                      window getSelection   getRangeAt 0  insertNode newNode                     else                       document selection createRange   pasteHTML text                                             else               text   clp getData  text plain                      if  text                           document execCommand  insertText   false  text

User · Answer

This should work on all browsers that support the onpaste event and the mutation observer   This solution goes a step beyond getting the text only  it actually allows you to edit the pasted content before it get pasted into an element   It works by using contenteditable  onpaste event  supported by all major browsers  en mutation observers  supported by Chrome  Firefox and IE11    step 1  Create a HTML-element with contenteditable   lt div contenteditable  true  id  target paste element  gt  lt  div gt    step 2  In your Javascript code add the following event  document getElementById  target paste element   addEventListener  paste   pasteEventVerifierEditor bind window  pasteCallBack   false     We need to bind pasteCallBack  since the mutation observer will be called asynchronously   step 3  Add the following function to your code  function pasteEventVerifierEditor callback  e         is fired on a paste event         pastes content into another contenteditable div  mutation observer observes this  content get pasted  dom tree is copied and can be referenced through call back        create temp div       save the caret position      savedCaret   saveSelection document getElementById  target paste element          var tempDiv   document createElement  div        tempDiv id    id tempDiv paste editor         tempDiv style display    none       document body appendChild tempDiv       tempDiv contentEditable    true        tempDiv focus           we have to wait for the change to occur        attach a mutation observer     if  window  MutationObserver                    this is new functionality           observer is present in firefox chrome and IE11            select the target node            create an observer instance         tempDiv observer   new MutationObserver pasteMutationObserver bind window  callback               configuration of the observer          var config     attributes  false  childList  true  characterData  true  subtree  true                pass in the target node  as well as the observer options         tempDiv observer observe tempDiv  config                   function pasteMutationObserver callback         document getElementById  id tempDiv paste editor   observer disconnect        delete document getElementById  id tempDiv paste editor   observer       if  callback                  return the copied dom tree to the supplied callback            copy to avoid closures          callback apply document getElementById  id tempDiv paste editor   cloneNode true              document body removeChild document getElementById  id tempDiv paste editor         function pasteCallBack           paste the content into the element      restoreSelection document getElementById  target paste element    savedCaret       delete savedCaret       pasteHtmlAtCaret this innerHTML  false  true          saveSelection   function containerEl    if  containerEl    document activeElement        var range   window getSelection   getRangeAt 0       var preSelectionRange   range cloneRange        preSelectionRange selectNodeContents containerEl       preSelectionRange setEnd range startContainer  range startOffset       var start   preSelectionRange toString   length       return           start  start          end  start   range toString   length              restoreSelection   function containerEl  savedSel        containerEl focus        var charIndex   0  range   document createRange        range setStart containerEl  0       range collapse true       var nodeStack    containerEl   node  foundStart   false  stop   false       while   stop  amp  amp   node   nodeStack pop               if  node nodeType    3                var nextCharIndex   charIndex   node length              if   foundStart  amp  amp  savedSel start  gt   charIndex  amp  amp  savedSel start  lt   nextCharIndex                    range setStart node  savedSel start - charIndex                   foundStart   true                            if  foundStart  amp  amp  savedSel end  gt   charIndex  amp  amp  savedSel end  lt   nextCharIndex                    range setEnd node  savedSel end - charIndex                   stop   true                            charIndex   nextCharIndex            else               var i   node childNodes length              while  i--                    nodeStack push node childNodes i                                       var sel   window getSelection        sel removeAllRanges        sel addRange range      function pasteHtmlAtCaret html  returnInNode  selectPastedContent      function written by Tim Down  var sel  range  if  window getSelection           IE9 and non-IE     sel   window getSelection        if  sel getRangeAt  amp  amp  sel rangeCount            range   sel getRangeAt 0           range deleteContents                Range createContextualFragment   would be useful here but is            only relatively recently standardized and is not supported in            some browsers  IE9  for one          var el   document createElement  div            el innerHTML   html          var frag   document createDocumentFragment    node  lastNode          while    node   el firstChild                  lastNode   frag appendChild node                     var firstNode   frag firstChild          range insertNode frag               Preserve the selection         if  lastNode                range   range cloneRange                if  returnInNode                                range setStart lastNode  0     this part is edited  set caret inside pasted node                            else                               range setStartAfter lastNode                              if  selectPastedContent                    range setStartBefore firstNode                 else                   range collapse true                             sel removeAllRanges                sel addRange range                     else if    sel   document selection   amp  amp  sel type     Control            IE  lt  9     var originalRange   sel createRange        originalRange collapse true       sel createRange   pasteHTML html       if  selectPastedContent            range   sel createRange            range setEndPoint  StartToStart   originalRange           range select                What the code does    Somebody fires the paste event by using ctrl-v  contextmenu or other means In the paste event a new element with contenteditable is created  an element with contenteditable has elevated privileges  The caret position of the target element is saved  The focus is set to the new element The content gets pasted into the new element and is rendered in the DOM  The mutation observer catches this  it registers all changes to the dom tree and content   Then fires the mutation event  The dom of the pasted content gets cloned into a variable and returned to the callback  The temporary element is destroyed  The callback receives the cloned DOM  The caret is restored  You can edit this before you append it to your target  element  In this example I m using Tim Downs functions for saving restoring the caret and pasting HTML into the element    Example   x000D   x000D  document getElementById  target paste element   addEventListener  paste   pasteEventVerifierEditor bind window  pasteCallBack   false   x000D   x000D   x000D  function pasteEventVerifierEditor callback  e    x000D      is fired on a paste event   x000D      pastes content into another contenteditable div  mutation observer observes this  content get pasted  dom tree is copied and can be referenced through call back  x000D      create temp div x000D      save the caret position  x000D    savedCaret   saveSelection document getElementById  target paste element     x000D   x000D    var tempDiv   document createElement  div    x000D    tempDiv id    id tempDiv paste editor   x000D      tempDiv style display    none   x000D    document body appendChild tempDiv   x000D    tempDiv contentEditable    true   x000D   x000D    tempDiv focus    x000D   x000D      we have to wait for the change to occur  x000D      attach a mutation observer x000D    if  window  MutationObserver      x000D        this is new functionality x000D        observer is present in firefox chrome and IE11 x000D         select the target node x000D         create an observer instance x000D      tempDiv observer   new MutationObserver pasteMutationObserver bind window  callback    x000D         configuration of the observer  x000D      var config     x000D        attributes  false  x000D        childList  true  x000D        characterData  true  x000D        subtree  true x000D         x000D   x000D         pass in the target node  as well as the observer options x000D      tempDiv observer observe tempDiv  config   x000D   x000D      x000D   x000D    x000D   x000D   x000D   x000D  function pasteMutationObserver callback    x000D   x000D    document getElementById  id tempDiv paste editor   observer disconnect    x000D    delete document getElementById  id tempDiv paste editor   observer  x000D   x000D    if  callback    x000D        return the copied dom tree to the supplied callback  x000D        copy to avoid closures  x000D      callback apply document getElementById  id tempDiv paste editor   cloneNode true    x000D      x000D    document body removeChild document getElementById  id tempDiv paste editor     x000D   x000D    x000D   x000D  function pasteCallBack     x000D      paste the content into the element  x000D    restoreSelection document getElementById  target paste element    savedCaret   x000D    delete savedCaret  x000D   x000D      edit the copied content by slicing x000D    pasteHtmlAtCaret this innerHTML slice 3   false  true   x000D    x000D   x000D   x000D  saveSelection   function containerEl    x000D    if  containerEl    document activeElement    x000D      var range   window getSelection   getRangeAt 0   x000D      var preSelectionRange   range cloneRange    x000D      preSelectionRange selectNodeContents containerEl   x000D      preSelectionRange setEnd range startContainer  range startOffset   x000D      var start   preSelectionRange toString   length  x000D   x000D      return   x000D        start  start  x000D        end  start   range toString   length x000D         x000D      x000D     x000D   x000D  restoreSelection   function containerEl  savedSel    x000D    containerEl focus    x000D    var charIndex   0  x000D      range   document createRange    x000D    range setStart containerEl  0   x000D    range collapse true   x000D    var nodeStack    containerEl   x000D      node  foundStart   false  x000D      stop   false  x000D   x000D    while   stop  amp  amp   node   nodeStack pop       x000D      if  node nodeType    3    x000D        var nextCharIndex   charIndex   node length  x000D        if   foundStart  amp  amp  savedSel start  gt   charIndex  amp  amp  savedSel start  lt   nextCharIndex    x000D          range setStart node  savedSel start - charIndex   x000D          foundStart   true  x000D          x000D        if  foundStart  amp  amp  savedSel end  gt   charIndex  amp  amp  savedSel end  lt   nextCharIndex    x000D          range setEnd node  savedSel end - charIndex   x000D          stop   true  x000D          x000D        charIndex   nextCharIndex  x000D        else   x000D        var i   node childNodes length  x000D        while  i--    x000D          nodeStack push node childNodes i    x000D          x000D        x000D      x000D   x000D    var sel   window getSelection    x000D    sel removeAllRanges    x000D    sel addRange range   x000D    x000D   x000D  function pasteHtmlAtCaret html  returnInNode  selectPastedContent    x000D      function written by Tim Down x000D   x000D    var sel  range  x000D    if  window getSelection    x000D         IE9 and non-IE x000D      sel   window getSelection    x000D      if  sel getRangeAt  amp  amp  sel rangeCount    x000D        range   sel getRangeAt 0   x000D        range deleteContents    x000D   x000D           Range createContextualFragment   would be useful here but is x000D           only relatively recently standardized and is not supported in x000D           some browsers  IE9  for one  x000D        var el   document createElement  div    x000D        el innerHTML   html  x000D        var frag   document createDocumentFragment    x000D          node  lastNode  x000D        while   node   el firstChild     x000D          lastNode   frag appendChild node   x000D          x000D        var firstNode   frag firstChild  x000D        range insertNode frag   x000D   x000D           Preserve the selection x000D        if  lastNode    x000D          range   range cloneRange    x000D          if  returnInNode    x000D            range setStart lastNode  0     this part is edited  set caret inside pasted node  x000D            else   x000D            range setStartAfter lastNode   x000D            x000D          if  selectPastedContent    x000D            range setStartBefore firstNode   x000D            else   x000D            range collapse true   x000D            x000D          sel removeAllRanges    x000D          sel addRange range   x000D          x000D        x000D      else if   sel   document selection   amp  amp  sel type     Control     x000D         IE  lt  9 x000D      var originalRange   sel createRange    x000D      originalRange collapse true   x000D      sel createRange   pasteHTML html   x000D      if  selectPastedContent    x000D        range   sel createRange    x000D        range setEndPoint  StartToStart   originalRange   x000D        range select    x000D        x000D      x000D    x000D  div   x000D    border  1px solid black  x000D    height  50px  x000D    padding  5px  x000D    x000D   lt div contenteditable  true  id  target paste element  gt  lt  div gt  x000D   x000D   x000D      Many thanks to Tim Down See this post for the answer   Get the pasted content on document on paste event

User · Answer

I ve written a little proof of concept for Tim Downs proposal here with off-screen textarea  And here goes the code    lt html gt   lt head gt   lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 4 jquery min js  gt  lt  script gt    lt script language  JavaScript  gt     document  ready function      var ctrlDown   false  var ctrlKey   17  vKey   86  cKey   67     document  keydown function e        if  e keyCode    ctrlKey  ctrlDown   true     keyup function e        if  e keyCode    ctrlKey  ctrlDown   false           capture-paste   keydown function e        if  ctrlDown  amp  amp   e keyCode    vKey    e keyCode    cKey                area   css  display   block                area   focus                            capture-paste   keyup function e        if  ctrlDown  amp  amp   e keyCode    vKey    e keyCode    cKey                                      area   blur              do your sanitation check or whatever stuff here             paste-output   text     area   val                 area   val                  area   css  display   none                    lt  script gt    lt  head gt   lt body class  capture-paste  gt    lt div id  paste-output  gt  lt  div gt         lt div gt       lt textarea id  area  style  display  none  position  absolute  left  -99em   gt  lt  textarea gt       lt  div gt    lt  body gt   lt  html gt    Just copy and paste the whole code into one html file and try to paste  using ctrl-v  text from clipboard anywhere on the document    I ve tested it in IE9 and new versions of Firefox  Chrome and Opera  Works quite well  Also it s good that one can use whatever key combination he prefers to triger this functionality  Of course don t forget to include jQuery sources   Feel free to use this code and if you come with some improvements or problems please post them back  Also note that I m no Javascript developer so I may have missed something    do your own testign

User · Answer

Live Demo  Tested on Chrome   FF   IE11  There is a Chrome IE annoyance which is that these browsers add  lt div gt  element for each new line  There is a post about this here and it can be fixed by setting the contenteditable element to be display inline-block  Select some highlighted HTML and paste it here    x000D   x000D  function onPaste e   x000D    var content  x000D    e preventDefault    x000D   x000D    if  e clipboardData    x000D      content   e clipboardData getData  text plain    x000D      document execCommand  insertText   false  content   x000D      return false  x000D      x000D    else if  window clipboardData    x000D      content   window clipboardData getData  Text    x000D      if  window getSelection  x000D        window getSelection   getRangeAt 0  insertNode  document createTextNode content     x000D      x000D    x000D   x000D   x000D          EVENT BINDING           x000D  document querySelector   contenteditable    addEventListener  paste   onPaste   x000D   contenteditable    x000D       chroem bug  https   stackoverflow com a 24689420 104380    x000D    display inline-block  x000D    width  calc 100  - 40px   x000D    min-height 120px   x000D    margin 10px  x000D    padding 10px  x000D    border 1px dashed green  x000D    x000D   x000D      x000D   mark HTML inside the  contenteditable    x000D    Shouldn t be any OFC    x000D     x000D   contenteditable     x000D    background-color red  x000D    x000D   lt div contenteditable gt  lt  div gt  x000D   x000D   x000D

User · Answer

This worked for me    function onPasteMe currentData  maxLen           validate max length of pasted text     var totalCharacterCount   window clipboardData getData  Text   length      lt input type  text  onPaste  return onPasteMe this  50      gt

[javascript] JavaScript get clipboard data on paste event (Cross browser)

Examples related to javascript

Examples related to cross-browser

Examples related to clipboard