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

I have a jquery token tagit plugin and I want to bind to the paste event to add items correctly.

我有一个jquery标记标签插件，我想绑定到粘贴事件以正确地添加条目。

I'm able to bind to the paste event like so:

我可以绑定到粘贴事件如下:

    .bind("paste", paste_input)

...

…

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

How can I obtain the actual pasted content value?

如何获得实际粘贴的内容值?

7 个解决方案

#1

There is an onpaste event that works in modern day browsers. You can access the pasted data using the getData function on the clipboardData object.

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

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

Note that bind and unbind are deprecated as of jQuery 3. The preferred call is to on.

注意，绑定和unbind在jQuery 3中已被弃用。首选的呼叫是on。

All modern day browsers support the Clipboard API.

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

参见:在Jquery中如何处理粘贴?

#2

How about this: http://jsfiddle.net/5bNx4/

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

Please use .on if you are using jq1.7 et al.

如果您正在使用jq1.7等，请使用.on。

Behaviour: When you type anything or paste anything on the 1st textarea the teaxtarea below captures the cahnge.

行为:当您在第一个textarea上键入任何东西或粘贴任何东西时，下面的teaxtarea将捕获cahnge。

Rest I hope it helps the cause. :)

休息，我希望它能帮助这个事业。:)

Helpful link =>

有用的链接= >

How do you handle oncut, oncopy, and onpaste in jQuery?

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

Catch paste input

抓住粘贴输入

code

代码

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

#3

I recently needed to accomplish something similar to this. I used the following design to access the paste element and value. jsFiddle demo

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

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

#4

You could compare the original value of the field and the changed value of the field and deduct the difference as the pasted value. This catches the pasted text correctly even if there is existing text in the field.

您可以比较字段的原始值和字段的更改值，并将差异作为粘贴值进行抵扣。即使字段中存在文本，也可以正确捕获已粘贴的文本。

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

#5

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

#6

It would appear as though this event has some clipboardData property attached to it (it may be nested within the originalEvent property). The clipboardData contains an array of items and each one of those items has a getAsString() function that you can call. This returns the string representation of what is in the item.

看起来这个事件似乎有一些clipboardData属性附加到它(它可能嵌套在originalEvent属性中)。clipboardData包含一个条目数组，其中的每个条目都有一个getAsString()函数，您可以调用它。它返回项中内容的字符串表示形式。

Those items also have a getAsFile() function, as well as some others which are browser specific (e.g. in webkit browsers, there is a webkitGetAsEntry() function).

这些项目还具有getAsFile()函数，以及其他一些特定于浏览器的功能(例如，在webkit浏览器中，有一个webkitGetAsEntry()函数))。

For my purposes, I needed the string value of what is being pasted. So, I did something similar to this:

出于我的目的，我需要粘贴的内容的字符串值。我做了一些类似的事情

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

You'll want to perform an iteration through the items, keeping a string concatenation result.

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

The fact that there is an array of items makes me think more work will need to be done, analyzing each item. You'll also want to do some null/value checks.

有一组项目的事实使我认为需要做更多的工作，分析每个项目。您还需要执行一些null/值检查。

#7

This work on all browser to get pasted value. And also to creating common method for all text box.

这可以在所有浏览器上获得粘贴值。并为所有文本框创建通用方法。

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

#1