如何捕获粘贴事件的输入值？

Question

在我的网站上,用户可以将文本(在本例中为url)粘贴到输入字段中.我想捕获使用jQuery粘贴的文本的值.我使用下面的代码在FF中工作,但它在IE中不起作用(我不认为IE支持"粘贴"事件).

任何人都知道如何在所有现代浏览器中使这项工作？我已经在SO上找到了其他一些答案,但大多数都只有FF,似乎没有一个提供完整的解决方案.

这是我到目前为止的代码:

$("input.url").live('paste', function(event) {
    var _this = this;
    // Short pause to wait for paste to complete
    setTimeout( function() {
        var text = $(_this).val();
        $(".display").html(text);
    }, 100);
});

JSFiddle:http://jsfiddle.net/TZWsB/1/

Answer 1

jQuery在IE中使用paste-event的live-method有问题; 解决方法:

$(document).ready(function() {
    $(".url").bind('paste', function(event) {
        var _this = this;
        // Short pause to wait for paste to complete
        setTimeout( function() {
            var text = $(_this).val();
            $(".display").html(text);
        }, 100);
    });
});

小提琴:http://jsfiddle.net/Trg9F/

Answer 2

$('input').on('paste', function(e) {
    // common browser -> e.originalEvent.clipboardData
    // uncommon browser -> window.clipboardData
    var clipboardData = e.clipboardData || e.originalEvent.clipboardData || window.clipboardData;
    var pastedData = clipboardData.getData('text');
});

Answer 3

听取这个change事件以及paste.change将在提交之前可靠地触发更改的字段,而paste仅在支持显式粘贴的浏览器上发生; 它不会被其他编辑操作触发,例如拖放,剪切复制,撤消重做,拼写检查,IME替换等.

问题change在于,只有在字段中的编辑完成时才会立即触发.如果你想要发生所有变化,那么事件将是input...除了这是一个新的HTML5功能,并不是所有地方都支持(特别是:IE <9).你可以通过捕捉所有这些事件来做到这一点:

$('.url').bind('input change paste keyup mouseup',function(e){
    ...
});

但是,如果你想绝对流行的浏览器迅速的每一个变化是不支持input,你别无选择,只能查询一个值setInterval.

Answer 4

更好的是使用 e.originalEvent.clipboardData.getData('text'); 检索粘贴的数据；

$("input").on("paste", function(e) { 
    var pastedData = e.originalEvent.clipboardData.getData('text');
    // ... now do with pastedData whatever you like ...
});

这样您就可以避免超时，并且所有主要浏览器都支持它。