Question

在我的网站上，用户可以将文本（在本例中为网址）粘贴到输入字段中。我想捕获使用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

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

change的问题在于，只有在字段中的编辑完成后才会立即触发。如果您希望捕获所有更改，则事件将为input ...除了这是一个不受任何地方支持的新HTML5功能（特别是：IE＆lt; 9）。你可以通过捕捉所有这些事件来做到这一点：

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

但是如果您希望肯定在不支持input的浏览器上快速捕获每个更改，您别无选择，只能在setInterval上轮询值。

Answer 3

更好的是使用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 4

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

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

5 个答案: