79

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

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

    .bind("paste", paste_input)

...

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

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

4

9 回答 9

166

在现代浏览器中有一个 onpaste 事件。getData您可以使用对象上的函数访问粘贴的数据clipboardData。

$("#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。

所有现代浏览器都支持剪贴板 API。

另请参阅：在 Jquery 中如何处理粘贴？

于 2012-07-23T01:26:42.400 回答
20

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

.on如果您使用的是 jq1.7 等，请使用。

行为：当您paste在第一个 textarea 上键入任何内容或任何内容时，下面的 teaxtarea 将捕获 cahnge。

休息我希望它有助于事业。:)

有用的链接=>

在 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);
     });
});
于 2012-07-23T01:30:38.837 回答
11

我最近需要完成类似的事情。我使用以下设计来访问粘贴元素和值。jsFiddle 演示

$('body').on('paste', 'input, textarea', function (e)
{
    setTimeout(function ()
    {
        //currentTarget added in jQuery 1.3
        alert($(e.currentTarget).val());
        //do stuff
    },0);
});
于 2014-06-24T18:08:28.170 回答
7

另一种方法：该input事件也将捕获该paste事件。

$('textarea').bind('input', function () {
    setTimeout(function () { 
        console.log('input event handled including paste event');
    }, 0);
});
于 2018-07-25T11:33:48.583 回答
3 
$(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');
    }
});
于 2014-04-04T07:43:49.410 回答
3

在现代浏览器上这很简单：只需使用input事件和inputType属性：

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

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

于 2019-02-25T17:51:49.570 回答
2

您可以将字段的原始值与字段的更改值进行比较，并将差值作为粘贴值扣除。即使字段中存在现有文本，这也会正确捕获粘贴的文本。

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);
    });
});
于 2013-05-06T18:23:55.767 回答
2

看起来好像这个事件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.
    });
});

您将希望通过项目执行迭代，保留字符串连接结果。

有一系列项目的事实让我认为需要做更多的工作，分析每个项目。您还需要进行一些空值/值检查。

于 2014-09-23T15:05:58.120 回答
2

这适用于所有浏览器以获取粘贴值。并且还为所有文本框创建通用方法。

$("#textareaid").bind("paste", function(e){       
    var pastedData = e.target.value;
    alert(pastedData);
} )
于 2016-06-30T05:09:45.297 回答