jQuery绑定粘贴事件，如何获取粘贴的内容

Question

我有一个 jQuery token tagit 插件，我想绑定到粘贴事件以正确添加项目。

我可以像这样绑定到粘贴事件：

    .bind("paste", paste_input)

...

function paste_input(e) {
    console.log(e)
    return false;
}

我该如何获取实际粘贴的内容值？

- AnApprentice

Answer 1

现代浏览器中有一个onpaste事件，可以通过clipboardData对象的getData函数访问粘贴的数据。

$("#textareaid").bind("paste", function(e){
    // access the clipboard using the api
    var pastedData = e.originalEvent.clipboardData.getData('text');
    alert(pastedData);
} );

注意，自jQuery 3版本起，bind和unbind已经被弃用，推荐使用on。

所有现代浏览器均支持Clipboard API。

另请参见：在JQuery中如何处理粘贴？

- jeff

---

这段代码的var pastedData =行将出现错误：Uncaught TypeError: Cannot read property 'getData' of undefined。您需要将e.clipboardData更改为e.originalEvent.clipboardData。我怀疑是因为jquery将实际的粘贴事件包装在自己的事件中 - 不过不要引用我的话。 - FireWingLead

e.originalEvent.clipboardData.getData('text/plain') 对我有用。 - Sridhar

如果您需要，IE的解决方案是：window.clipboardData.getData('text')。 - DdW

您可以将事件处理程序添加到“粘贴”和“输入”事件中，在“粘贴”事件处理程序上设置标志，并在“输入”事件处理程序中检查该标志。其中，“this.value”是粘贴的值，在IE11中有效。 - Niloct

Answer 2

这个怎么样：http://jsfiddle.net/5bNx4/

如果您使用jq1.7或更高版本，请使用.on。

行为：当您在第一个文本区域中键入任何内容或粘贴任何内容时，下面的文本区域会捕获更改。

希望其余的能对你有所帮助。:)

有用的链接 =>

如何在jQuery中处理oncut、oncopy和onpaste？

捕获粘贴输入

编辑:
.on()内的事件列表应该以空格分隔。请参见https://api.jquery.com/on/

代码：

$(document).ready(function() {
    var $editor    = $('#editor');
    var $clipboard = $('<textarea />').insertAfter($editor);
  
    if(!document.execCommand('StyleWithCSS', false, false)) {
        document.execCommand('UseCSS', false, true);
    }
        
    $editor.on('paste keydown', function() {
        var $self = $(this);            
        setTimeout(function(){ 
            var $content = $self.html();             
            $clipboard.val($content);
        },100);
     });
});

- Tats_innit

---

@Raminson 是的，我几天都是undefined呢，哈哈。 - Tats_innit

它不支持上下文菜单粘贴（右键+粘贴），有什么想法吗？ - 0_o

Answer 3

我最近也需要完成类似的任务。我使用以下设计来访问 paste 元素和值。jsFiddle演示

$('body').on('paste', 'input, textarea', function (e)
{
    setTimeout(function ()
    {
        //currentTarget added in jQuery 1.3
        alert($(e.currentTarget).val());
        //do stuff
    },0);
});

- Kevin

Answer 4

另一种方法是： 该 input 事件将同时捕获 paste 事件。

$('textarea').bind('input', function () {
    setTimeout(function () { 
        console.log('input event handled including paste event');
    }, 0);
});

- Shahar Shokrani

Answer 5

在现代浏览器中，很容易实现：只需使用“input”事件以及“inputType”属性：input事件与inputType属性结合使用。

$(document).on('input', 'input, textarea', function(e){
  if (e.originalEvent.inputType == 'insertFromPaste') {
    alert($(this).val());
  }
});

https://codepen.io/anon/pen/jJOWxg

- Yarin

Answer 6

这适用于所有浏览器来获取已粘贴的值，并创建适用于所有文本框的通用方法。

$("#textareaid").bind("paste", function(e){       
    var pastedData = e.target.value;
    alert(pastedData);
} )

- Mukesh Kalgude

---

e.target.value可能需要使用setTimeout。https://dev59.com/-3RB5IYBdhLWcg3wN08P#1503425 - Bernhard Döbler

Answer 7

$(document).ready(function() {
    $("#editor").bind('paste', function (e){
        $(e.target).keyup(getInput);
    });

    function getInput(e){
        var inputText = $(e.target).html(); /*$(e.target).val();*/
        alert(inputText);
        $(e.target).unbind('keyup');
    }
});

- Cyrus

Answer 8

你可以将字段的原始值和更改后的值进行比较，并将差异作为粘贴的值。即使字段中存在现有文本，这也可以正确捕获粘贴的文本。 http://jsfiddle.net/6b7sK/

function text_diff(first, second) {
    var start = 0;
    while (start < first.length && first[start] == second[start]) {
        ++start;
    }
    var end = 0;
    while (first.length - end > start && first[first.length - end - 1] == second[second.length - end - 1]) {
        ++end;
    }
    end = second.length - end;
    return second.substr(start, end - start);
}
$('textarea').bind('paste', function () {
    var self = $(this);
    var orig = self.val();
    setTimeout(function () {
        var pasted = text_diff(orig, $(self).val());
        console.log(pasted);
    });
});

- Alo Sarv

Answer 9

似乎该事件附带了一个名为clipboardData的属性（它可能嵌套在originalEvent属性中）。clipboardData包含一些项目，并且每个项目都有一个可调用的getAsString()函数。这将返回项目中所包含内容的字符串表示形式。

这些项目还具有getAsFile()等其他一些特定于浏览器的函数（例如，在webkit浏览器中，存在一个webkitGetAsEntry()函数）。

对于我的目的，我需要复制粘贴的字符串值。因此，我执行了类似于以下操作：

$(element).bind("paste", function (e) {
    e.originalEvent.clipboardData.items[0].getAsString(function (pStringRepresentation) {
        debugger; 
        // pStringRepresentation now contains the string representation of what was pasted.
        // This does not include HTML or any markup. Essentially jQuery's $(element).text()
        // function result.
    });
});

你需要对这些项目进行迭代，并保留字符串连接结果。

由于存在项目数组，因此我认为需要进行更多的工作，分析每个项目。您还需要进行一些空值/值检查。

- Chandler Zwolle

---

请问您能标记适用于哪些浏览器吗？ - Owen Beresford

Answer 10

我是这样做的，在大多数人使用的浏览器上都能正常工作。

$("#couponCode").bind("change keyup input paste",function () {
   const value=  document.getElementById("couponCode").value;
});

- Walter Verhoeven