Question

I have a text field that I’m binding the paste event to using JQuery. When I first paste something into the form field and log its val() it returns a blank string. Likewise, if I paste again into the field, it returns the previous value before pasting. Essentially I have a race condition or sequencing issue, for lack of a better term. It seems the form field will not update until the paste event completes.

Is there any way to check the value of the field after the paste event has completed and the field is actually populated? I want the actual field value, not the clipboardData, as I know that’s an IE-only feature.

$('#url').bind('paste', function(e) {
    alert($(this).val());
});

Answer 1

It turns out a decent solution is to wrap the callback in a setTimeout(), with a delay of 0 milliseconds, in order to make it asynchronous.

My new code is:

var urlField = $('#url');
urlField.bind('paste', function(e) {
    setTimeout(function() {
        alert(urlField.val());
    }, 0); // note the 0 milliseconds
});

Thanks to DigitalBush’s Masked Input Plugin, it uses this technique throughout the source.