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之后，比较两个字符串并消除前面那部分，因此返回剪贴板的值。

- jviotti

---

你的意思是在插入复制的文本之前只想清除输入吗？ - PhearOfRayne

@StevenFarley 我想获取用户刚刚粘贴到输入框中的字符串。 - jviotti

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

Fiddle: http://jsfiddle.net/PMq6U/

- PhearOfRayne

---

几乎了 :) 我仍然需要在事件内将粘贴的值作为变量获取。我尝试过这样做：http://jsfiddle.net/jviotti/PMq6U/3/警报应返回新值。但实际上它什么都没有返回，好像在val()之前调用一样。 - jviotti

@RicardoLohmann 它将值设置为空，然后将其设置为粘贴的值。 - jviotti

@jviotti：你可以使用旧的 setTimeout е’Њ 1ms зљ„жЉЂе·§гЂ‚http://jsfiddle.net/elclanrs/PMq6U/4/ - elclanrs

看起来运行良好，我将会实现并接受这个答案。只是额外想问一下...有没有可能使它与中键粘贴（Unix Paste）兼容？ :) - jviotti

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

- cuixiping

Answer 3

你可以使用 onbeforepaste 事件来实现它。

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

- Licson

---

文档？我找不到那个事件。它是特定于浏览器的吗？ - nickaknudson

最初它只适用于IE，但现在已经包含在HTML5规范中。 - Licson

我仍然不确定这是多少跨浏览器的解决方案。 - jviotti

我不明白为什么它在你的浏览器上无法工作。在我的浏览器上它运行良好。请参见此链接。 - Licson