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

在我的网站上，用户可以将文本（本例中为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/

来源

2011-08-01 rolling stone

http://stackoverflow.com/questions/2176861/javascript-get-clipboard-data-on-paste-event-cross-browser/2177059#2177059 - 类似 – Avien

感谢@Avien，哇，这是一些复杂的黑客:)不幸的是，通过解决方案阅读他们没有一个100％正确工作，或跨所有现代浏览器工作。 –

这也可能有帮助，使用jquery并且简单得多：http://stackoverflow.com/questions/2903991/how-to-detect-ctrlv-ctrlc-using-javascript – sitnik

jQuery在IE中使用粘贴事件的实时方法存在问题;解决方法：

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

来源

2011-08-01 18:20:11 scessor

+1谢谢@scessor，这是非常有用的知道。问题是我让用户动态添加更多输入，所以我需要实时方法。有没有一种方法可以让这项工作与现场一起工作，而不是一起窃取隐藏输入的解决方案？ –

我有一个没有活动的解决方案：当您动态添加输入时，您可以使用类url解除所有节点的绑定，并再次绑定该粘贴事件;不是很好，但很简单。 – scessor

工作！谢谢！ –

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

来源

2011-08-01 18:09:02 qw3n

thanks @ qw3n。问题是页面上只有url字段，所以我确定当用户只需粘贴url并点击提交（不离开字段）时会出现实例。 –

@rolling stone好吧，你可以做一个双管齐下的检查。获取'onsubmit'事件并检查输入。如果空返回true否则返回false。问题是你将不得不做一些事情，以防止该功能运行两次。由于'onblur'事件仍然会触发。当你从一个函数触发事件时，可能有布尔切换变量。希望这是有道理的。这是一个复杂的问题，但我认为不如那么选择。 – qw3n

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

change的问题在于它不会马上触发，仅当在字段中编辑完成时。如果要在发生变化时捕获所有更改，则事件将为input ...，但这是一项新的HTML5功能，并不受到任何支持（特别是：IE < 9）。你几乎可以通过捕获所有这些事件做到这一点：

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

但是，如果你想绝对抓在浏览器上的每一个变化很快，不支持input，你别无选择，只能查询一个值setInterval。

来源

2011-08-01 18:32:26 bobince

+1 thanks @bobince！我应该提到所有用户都会在这个输入字段中进行粘贴（正如我应该说的那样）。另外它看起来像我错了，IE支持'粘贴'，它只是有一些'活'和'粘贴'的问题。我的问题是，我动态生成一些内容的基础上，他们粘贴的网址，我想显示给用户，以确保他们提交之前是正确的。事实上，我实际上禁用了URL粘贴时的提交按钮，直到完成所有这些工作的jQuery函数。任何意见将不胜感激！ –

是的，'onpaste'在IE的某些情况下不会冒泡，jQuery的'live'使用事件委托，这需要冒泡。还有其他特定于浏览器的问题，例如Safari中的textareas上的onpaste未触发。无论兼容性问题如何，我都建议允许以用户选择的任何方式填写字段，包括直接打字和拖放，而不是专门针对粘贴操作。 – bobince

谢谢@bobince，肯定会把这个变成最后的事件来捕获拖放吗？ –

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

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

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

来源

2015-05-26 12:50:01

我喜欢这个想法，但对我来说，e.originalEvent有很多属性，但它没有剪贴板数据字段/属性:([我用的是Microsoft TypeSafe＆JQuery 3.1.1和jQuery UI 1.12.1来编写我的Javascript。] – Zeek

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

来源

2015-05-28 03:02:11

在我搜索的所有解决方案中，现在只有这个似乎适用于我。 – palerdot

这应该是正确的答案。 –

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

回答

相关问题