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

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

也许尝试改用onblur 事件。因此，用户 c/p 进入输入，当他们离开该字段时，脚本会检查那里的内容。这可以节省很多麻烦，因为它适用于鼠标和键 c/p 以及手动输入的输入。

Answer 2

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 3

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

change 的问题在于它不会立即触发，只有在字段中的编辑完成时才会触发。如果您想在所有更改发生时捕获所有更改，则事件将是input...，但这是一个并非所有地方都支持的新 HTML5 功能（特别是：IE

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

这样可以避免超时，所有主流浏览器都支持。

Answer 5

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