Javascript 如何捕获粘贴事件的输入值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6902455/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I capture the input value on a paste event?
提问by rolling stone
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-only，似乎没有一个提供完整的解决方案。
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/
回答by scessor
jQuery has a problem with the live-method with the paste-event in the IE; workaround:
jQuery 的 live-method 和 IE 中的 paste-event 有问题；解决方法：
$(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/
回答by Sakamoto Riku
$('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');
});
回答by bobince
Listen for the changeevent as well as paste. changewill reliably fire on a changed field before submission, whereas pasteonly 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.
侦听change事件以及paste. change将在提交之前可靠地触发更改的字段，而paste仅在支持它的浏览器上发生显式粘贴；它不会被其他编辑操作触发，例如拖放、剪切复制、撤消重做、拼写检查、IME 替换等。
The problem with changeis 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:
问题change在于它不会立即触发，只有在字段中的编辑完成时才会触发。如果您想在所有更改发生时捕获它们，则事件将是input... 只是这是一个新的 HTML5 功能，并非所有地方都支持（特别是：IE<9）。你几乎可以通过捕捉所有这些事件来做到这一点：
$('.url').bind('input change paste keyup mouseup',function(e){
...
});
But if you want to definitelycatch every change quickly on browsers that don't support input, you have no choice but to poll the value on a setInterval.
但是，如果你想绝对流行的浏览器迅速的每一个变化是不支持input，你别无选择，只能查询一个值setInterval。
回答by Triple S
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.
这样您就可以避免超时，并且所有主要浏览器都支持它。
回答by qw3n
Maybe try using the onblurevent 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 以及手动输入的输入。
