Catch pasted input in textarea

Question

with javascript(Jquery).

Searched online, seems like it's not possible. So far I have something like:

$("#textAreaId").bind('paste', function (e) {
        alert('pasting text!!!!');

        var data = $("#taData").val();

        alert(data);



    });

but the data is empty at this stage...is there a way to capture the pasted input after it's been pasted? Seems like there should be a way.

keyup event in Jquery is not triggered when pasting occurs.

Any ideas?

Answer 1

Not all browsers support the same copy / paste capabilities. Here is a chart of which browser support which functions:

http://www.quirksmode.org/dom/events/cutcopypaste.html

If the browser supports capturing the copy / paste events, jQuery should work fine. I would suggest testing each of your targeted browsers.

Another approach would be to use the jQuery 'data' property to detect that the input field has changed. Here is an article with example code:

http://www.mydogboris.com/2009/10/using-jquery-data-feature-to-detect-form-changes/

from the article:

var formChanged = false;

$(document).ready(function() {
     $('#my_form input[type=text].editable, #my_form textarea.editable').each(function (i) {
          $(this).data('initial_value', $(this).val());
     });

     $('#my_form input[type=text].editable, #my_form textarea.editable').keyup(function() {
          if ($(this).val() != $(this).data('initial_value')) {
               handleFormChanged();
          }
     });

     $('#my_form .editable').bind('change paste', function() {
          handleFormChanged();
     });

     $('.navigation_link').bind("click", function () {
          return confirmNavigation();
     });
});

function handleFormChanged() {
     $('#save_or_update').attr("disabled", false);
     formChanged = true;
}

function confirmNavigation() {
     if (formChanged) {
          return confirm('Are you sure? Your changes will be lost!');
     } else {
          return true;
     }
}

Answer 2

I've answered a similar question before: http://stackoverflow.com/questions/3239124/javascript-catch-paste-event-in-textarea/3239609#3239609

Answer 3

Here is what I have decided to do. Please note that I am merely required to grab the pasted content.

$(document).ready(function () {         

    $("#taData").bind('paste', function (e) {
        setTimeout(function () { DisplayPastedData(); }, 100);
    });    

});



function DisplayPastedData() {

    var data = $("#taData").val();
    alert('input pasted ' + data);


}

I have arbitrarily selected 100 milliseconds to wait, which works nicely with my maximum of data pasted.