Catch pasted input in textarea

Question

with javascript (jQuery).

I searched online, it seems that this is impossible. So far, I have something like:

$("#textAreaId").bind('paste', function (e) { alert('pasting text!!!!'); var data = $("#taData").val(); alert(data); }); 

but the data at this stage is empty ... is there a way to capture the inserted input after pasting it? There seems to be a way.

jQuery's keyup event does not fire on insert.

Any ideas?

Answer 1

Here is what I decided to do. Please note that I just need to capture the inserted content.

 $(document).ready(function () { $("#taData").bind('paste', function (e) { setTimeout(function () { DisplayPastedData(); }, 100); }); }); function DisplayPastedData() { var data = $("#taData").val(); alert('input pasted ' + data); } 

I randomly selected 100 milliseconds to wait, which works great with my maximum number of inserted data.

Answer 2

Not all browsers support the same copy and paste capabilities. Here is the diagram in which the browser is supported:

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

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

Another approach would be to use the jQuery data property to detect input field changes. Here is an article with sample 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 3

Pretty old thread, but now you can use FilteredPaste.js ( http://willemmulder.github.com/FilteredPaste.js/ ). This will allow you to control which content is inserted into the text box or content content, and you can filter / modify / extract the content as you like.