jquery - jquery拦截粘贴事件

Question

我已经从输入绑定了一个粘贴事件：

$(document).ready(function(){
      $('.myInput').bind("paste",function(e) {
          console.log(e);
      });
});​

每次我按 CTRL-V 时，它都会返回e事件对象。

我想获取用户将要粘贴到输入中的数据。

通过检查事件对象，我在几个地方找到了值，例如：

• e.srcElement.value
• e.target.value

但是那些在粘贴发生后返回输入中的值。因此，如果我在输入另一个字符串后粘贴一些文本，我会将两个字符串连接起来。

我在互联网上搜索过，除了丑陋的闪存解决方案之外什么也没找到。

在 jquery 中有没有一种干净的方法来做到这一点？

我想e.srcElement.value在获取输入值before粘贴后获取整个文本，然后比较两个字符串并消除第一部分，通过连续返回剪贴板的值。

Answer 1

也许这就是你想要做的，不是 100% 肯定的：

HTML：

<input type="text" id="test" class="myInput" value="This is some default text" />​

jQuery：

$(document).ready(function () {
    $('input').on('paste', function (e) { //Attach paste event handler for all inputs
        $(this).val('').val(e.target.value); //Clear the current value, then insert the value of the data that was pasted
    });
});

小提琴：http: //jsfiddle.net/PMq6U/

Answer 2

clipboardData 适用于现代浏览器（IE11+、Firefox、Chrome...）。

$(document).ready(function(){
      $('.myInput').on('paste', function (e) {
          var dt = e.originalEvent.clipboardData;
          if(dt && dt.items && dt.items[0]){
              dt.items[0].getAsString(function(text){
                  console.log(text); //the pasted content
              });
          }else if(dt && 'getData' in dt){
              console.log(dt.getData('text')); //the pasted content
          }
      });
});

http://jsfiddle.net/6n10y0ds/9/

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer

Answer 3

您可以使用 onbeforepaste 事件来执行此操作。

$(function(){
    $('#el').on('beforepaste',function(e){
        [...]
    });
});