CODEWITHSUNDEEP
javascriptjquery
bobbyjones
bobbyjones

Reputation: 2079

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

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.

here is my http://jsfiddle.net/6Z3xP/1/

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

Upvotes: 0

Views: 384

Answers (3)

colbydauph
colbydauph

Reputation: 364

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/

Upvotes: 2

Hasin Hayder
Hasin Hayder

Reputation: 818

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

  1. Intercept paste event in Javascript and
  2. JavaScript get clipboard data on paste event (Cross browser)

Hope it helps.

Upvotes: 0

Sam
Sam

Reputation: 2201

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);
    }
});

});

Upvotes: 0

Related Questions