execute a condition after a bind() event in jQuery / Javascript

Question

how can properly execute an if statement after bind() event

it appears my code wont execute the if statement on the initial paste of youtube link in my input field.

this only works when i paste the link twice consecutively.

$(document).ready(function () {
    var textval = $('#input');
    var youtube = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i;

    $("#input").bind('paste', function () {
        if (youtube.test(textval.val())) {
            var yurl = textval.val().match(youtube)[0];
            alert(yurl);
        }
    });
});

i tried adding $(document).ready(function() right after the binding. but i cant seem to make it work.

background info: i want to capture a youtube url upon pasting a youtube link from a user

colbydauph · Accepted Answer · 2013-10-26T17:09:30.947

2

The value of the input is not immediately available when the paste event is fired, you need to delay your code for just an instant to let it become available.

Fiddle: http://jsfiddle.net/8Pvr4/1/

The only change is that the code in your bind callback is now wrapped in:

setTimeout(function() {

},0);

A more reliable method would be to get the value from the event object via:

e.originalEvent.clipboardData.getData('text/plain');

so your bind would become:

$("#input").bind('paste', function(e) {
    var val = e.originalEvent.clipboardData.getData('text/plain');
    if (youtube.test(val)) {
        var yurl = val.match(youtube)[0];
        alert(yurl);
    }            
});

Fiddle: http://jsfiddle.net/8Pvr4/3/

edited Oct 26 '13 at 17:09

answered Oct 26 '13 at 17:02

colbydauph

363
1
6

thank you for this. im fairly new to javascript. and i cant seem to find a good doc about `originalEvent` can you kindly explain to me how this part `var val = e.originalEvent.clipboardData.getData('text/plain');` really works? thanks. – bobbyjones Oct 27 '13 at 10:02
When jQuery fires events, the event object it passes through is not the original, it's their own flavor with normalized values [Explained Here](http://api.jquery.com/category/events/event-object/). All of jQuery's event objects have the `originalEvent` property, that acts as a pass-through for whatever the browser originally fired. Once you have the original paste event, you just need to know the right properties to access / methods to call to get what you're looking for, the info for which can be found [Here](https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent) – colbydauph Oct 27 '13 at 23:18

score 0 · Answer 2 · edited May 23 '17 at 12:05

The problem is that the paste event happens before text is entered:

In Jquery How to handle paste?

Here is a corrected fiddle. It does the operation you specified only when pasting data into the input.

http://jsfiddle.net/pTmKc/2/

$(document).ready(function () {
var textval = $('#input');
var youtube = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i;

var pasting = false;

$("#input").bind('paste', function () {
    pasting = true;
});

$("#input").bind('propertychange input', function () {
    if(!pasting) {
        return;
    }
    pasting = false;

    if (youtube.test(textval.val())) {
        var yurl = textval.val().match(youtube)[0];
        alert(yurl);
    }
});

});

score 0 · Answer 3 · edited May 23 '17 at 10:25

The way you are thinking "paste" event works, it actually doesn't work like that. The paste event merely triggers that something is being pasted from the clipboard. It doesn't supply the data which is being pasted. Ofcourse you can access it from the clipboard, but Javascript has restricted access to clipboard and you need to take care of it a little differently. See these two threads and you will understand how to do it

Hope it helps.

execute a condition after a bind() event in jQuery / Javascript

3 Answers3