Question

如何在bind()事件

之后正确执行if语句

我的代码似乎不会在输入字段的youtube链接的初始paste上执行 if语句。

仅当我连续两次粘贴链接时才有效。

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

我尝试在绑定后立即添加$(document).ready(function()。但我似乎无法使其发挥作用。

背景信息：我想在粘贴来自用户的YouTube链接时捕获youtube网址

Answer 1

当粘贴事件被触发时，输入的值不会立即可用，您需要暂时延迟代码以使其可用。

小提琴： http://jsfiddle.net/8Pvr4/1/

唯一的变化是绑定回调中的代码现在包含在：

中

setTimeout(function() {

},0);

更可靠的方法是通过以下方式从事件对象中获取值：

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

所以你的绑定会变成：

$("#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);
    }            
});

小提琴： http://jsfiddle.net/8Pvr4/3/

Answer 2

问题是粘贴事件发生在输入文本之前：

In Jquery How to handle paste?

这是一个纠正的小提琴。它仅在将数据粘贴到输入中时执行您指定的操作。

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

}）;

Answer 3

你认为“粘贴”事件的方式有效，它实际上并不像那样。粘贴事件仅触发从剪贴板粘贴的内容。它不提供正在粘贴的数据。当然，您可以从剪贴板访问它，但是Javascript限制了对剪贴板的访问权限，您需要稍微改变它。请参阅这两个主题，您将了解如何操作

Intercept paste event in Javascript 和
JavaScript get clipboard data on paste event (Cross browser)

希望它有所帮助。

在jQuery / Javascript中的bind（）事件之后执行一个条件

3 个答案: