Capturing text pasted into a text box using jQuery

Question

I need to take a text area insert event using jQuery. I tried the following code but it does not work ...

$(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 an additional resource, look here .

Answer 3

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

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

The keyup event on the text field has already fired. The next problem was that the paste and drop events fire before the text in the text field actually changes. In my case, I wanted to compare the new text with the source text. I resorted to 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 such things, but it works (when I tried the 100 ms interval, it is not).

Answer 4

This is the most useful solution:

 $("#item_name").bind("input change", function() {}); 

Perhaps the change is not significant.