Capture text pasted into a textarea with JQuery

Question

I have to take the paste event of a text area using JQuery. I have tried the following code but it is not working...

$(document).ready(function()
{ 
  $('#txtcomplaint').keyup(function()
  {  
     TextCounter('txtcomplaint','counterComplaint', 1000 ); 
  }) 
  $('#txtcomplaint').onpaste(function()
  {  
     alert()
     //TextCounter('txtcomplaint','counterComplaint', 1000 ); 
  }) 
});

Answer 1

You can do something like this

$("#txtcomplaint").bind('paste', function(e) {
    var elem = $(this);

    setTimeout(function() {
        // gets the copied text after a specified time (100 milliseconds)
        var text = elem.val(); 
    }, 100);
});

Answer 2

$('#txtcomplaint').bind('paste', function(e){ alert('pasting!') });

For additional resource take a look here.

Answer 3

I finally got this to work for 1) typing, 2) drag and drop, 3) Ctrl-V and 4) paste from the context menu of a mouse click, but I had to attach the paste and drop handlers to the document (where 'taValue' is the class of the textareas I'm trying to monitor):

        $(document).on("paste drop", '.taValue', function (e) {
          myHandler.call(e.target, e);
        });

The keyup event on the textarea already worked. The next problem was that the paste and drop events get fired BEFORE the text in the textarea actually changes. In my case I wanted to compare the new text to the original text. I resorted to a setTimeout:

    function myHandler(e) {
      if (e && (e.type === "drop" || e.type === "paste")) {
        var me = this;
        setTimeout(function () { myHandler.call(me) }, 200);
      }... [more code to do the comparison]

I hate using timeouts for things like this but it does work (when I tried a 100ms interval, it did not).