jQuery bind to Paste Event how to get the content of the paste

Question

I have a jquery token tagit plugin and I want to bind to the paste event to add items correctly   I m able to bind to the paste event like so        bind  paste   paste input         function paste input e        console log e      return false      How can I obtain the actual pasted content value

User · Answer

I recently needed to accomplish something similar to this   I used the following design to access the paste element and value  jsFiddle demo     body   on  paste    input  textarea   function  e        setTimeout function                    currentTarget added in jQuery 1 3         alert   e currentTarget  val               do stuff       0

User · Answer

It would appear as though this event has some clipboardData property attached to it  it may be nested within the originalEvent property   The clipboardData contains an array of items and each one of those items has a getAsString   function that you can call  This returns the string representation of what is in the item    Those items also have a getAsFile   function  as well as some others which are browser specific  e g  in webkit browsers  there is a webkitGetAsEntry   function    For my purposes  I needed the string value of what is being pasted  So  I did something similar to this     element  bind  paste   function  e        e originalEvent clipboardData items 0  getAsString function  pStringRepresentation            debugger              pStringRepresentation now contains the string representation of what was pasted             This does not include HTML or any markup  Essentially jQuery s   element  text              function result                You ll want to perform an iteration through the items  keeping a string concatenation result   The fact that there is an array of items makes me think more work will need to be done  analyzing each item  You ll also want to do some null value checks

User · Answer

Another approach  That input event will catch also the paste event      textarea   bind  input   function          setTimeout function               console log  input event handled including paste event           0

User · Answer

How about this  http   jsfiddle net 5bNx4   Please use  on if you are using jq1 7 et al    Behaviour  When you type anything or paste anything on the 1st textarea the teaxtarea below captures the cahnge   Rest I hope it helps the cause      Helpful link     How do you handle oncut  oncopy  and onpaste in jQuery   Catch paste input  code    document  ready function         var  editor          editor        var  clipboard       lt textarea   gt    insertAfter  editor        if  document execCommand  StyleWithCSS   false  false             document execCommand  UseCSS   false  true               editor on  paste  keydown   function             var  self     this                       setTimeout function                 var  content    self html                              clipboard val  content             100

User · Answer

You could compare the original value of the field and the changed value of the field and deduct the difference as the pasted value  This catches the pasted text correctly even if there is existing text in the field   http   jsfiddle net 6b7sK   function text diff first  second        var start   0      while  start  lt  first length  amp  amp  first start     second start               start            var end   0      while  first length - end  gt  start  amp  amp  first first length - end - 1     second second length - end - 1               end            end   second length - end      return second substr start  end - start        textarea   bind  paste   function          var self     this       var orig   self val        setTimeout function              var pasted   text diff orig    self  val             console log pasted

User · Answer

document  ready function             editor   bind  paste   function  e             e target  keyup getInput                function getInput e           var inputText     e target  html        e target  val              alert inputText             e target  unbind  keyup

User · Answer

On modern browsers it s easy  just use the input event along with the inputType attribute     document  on  input    input  textarea   function e     if  e originalEvent inputType     insertFromPaste         alert   this  val               https   codepen io anon pen jJOWxg

User · Answer

This work on all browser to get pasted value  And also to creating common method for all text box       textareaid   bind  paste   function e              var pastedData   e target value      alert pastedData

User · Answer

There is an onpaste event that works in modern day browsers  You can access the pasted data using the getData function on the clipboardData object       textareaid   bind  paste   function e          access the clipboard using the api     var pastedData   e originalEvent clipboardData getData  text        alert pastedData          Note that bind and unbind are deprecated as of jQuery 3  The preferred call is to on   All modern day browsers support the Clipboard API   See also  In Jquery How to handle paste

[javascript] jQuery bind to Paste Event, how to get the content of the paste

Examples related to javascript

Examples related to jquery

Examples related to copy-paste

Examples related to paste