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

On my site users can paste text (in this case a url) into an input field. I'd like to capture the value of the text that was pasted using jQuery. I've got this to work in FF using the code below, but it doesn't work in IE (I don't think IE supports the "paste" event).

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

Anyone know how to make this work across all modern browsers? I've found a few other answers to this on SO but most are FF-only and none seemed to offer a complete solution.

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

Here's the code I have so far:

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

$("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/

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

5 个解决方案

#1

jQuery has a problem with the live-method with the paste-event in the IE; workaround:

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

Fiddle: http://jsfiddle.net/Trg9F/

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

#2

Listen for the change event as well as paste. change will reliably fire on a changed field before submission, whereas paste only happens on browsers that support it on an explicit paste; it won't be triggered by other editing actions such as drag-and-drop, cut-copy, undo-redo, spellcheck, IME substitution etc.

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

The problem with change is that it doesn't fire straight away, only when editing in a field is finished. If you want to catch all changes as they happen, the event would be input... except that this is a new HTML5 feature that isn't supported everywhere (notably: IE<9). You could nearly do it by catching all these events:

更改的问题在于，只有在字段中的编辑完成后才会立即触发。如果你想要发生所有变化，那么事件将被输入...除了这是一个新的HTML5功能，并不是所有地方都支持（特别是：IE <9）。你可以通过捕捉所有这些事件来做到这一点：

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

But if you want to definitely catch every change quickly on browsers that don't support input, you have no choice but to poll the value on a setInterval.

但是如果你想在不支持输入的浏览器上快速捕捉每一个变化，你别无选择，只能在setInterval上轮询值。

#3

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

#4

Even better is it to use e.originalEvent.clipboardData.getData('text'); to retrieve pasted data;

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

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

This way you can avoid timeouts and it is supported on all major browsers.

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

#5

Maybe try using the onblur event instead. So the user c/p into the input and when they leave the field the script checks what's there. This could save a whole lot of hassle, since it works for mouse and key c/p as well as manually entered input.

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

#1