jQuery绑定到Paste Event,如何获取粘贴的内容

Question

我有一个jquery令牌tagit插件,我想绑定到粘贴事件以正确添加项目.

我能够像这样绑定到粘贴事件:

    .bind("paste", paste_input)

...

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

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

Answer 1

有一个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.

所有现代浏览器都支持Clipboard API.

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

Answer 2

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

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

行为:当您paste在第一个textarea上键入任何内容或任何内容时,下面的teaxtarea会捕获cahnge.

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

有用的链接=>

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

抓住粘贴输入

码

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

Answer 3

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

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

Answer 4

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

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

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

Answer 5

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

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