web-dev-qa-db-ja.com

貼り付けイベントへのjQueryバインド、貼り付けのコンテンツの取得方法

Jqueryトークンtagitプラグインがあり、pasteイベントにバインドしてアイテムを正しく追加したいです。

次のように貼り付けイベントにバインドできます。

    .bind("paste", paste_input)

...

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

実際に貼り付けられたコンテンツの値を取得するにはどうすればよいですか？

javascriptjquerycopy-pastepaste
63
AnApprentice

現代のブラウザで機能するonpasteイベントがあります。 getDataオブジェクトのclipboardData関数を使用して、貼り付けたデータにアクセスできます。

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

bind および nbind はjQuery 3で非推奨になっていることに注意してください。推奨される呼び出しは on です。

現代のすべてのブラウザは Clipboard API をサポートしています。

参照： Jquery In pasteの処理方法？

119
jeff

これはどうですか： http://jsfiddle.net/5bNx4/

Jq1.7などを使用している場合は、.onを使用してください。

動作：1番目のテキストエリアに何かを入力するかpaste何かを入力すると、下のteaxtareaが変更をキャプチャします。

それが原因に役立つことを願っています。 :)

役立つリンク=>

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

私は最近、これに似た何かを達成する必要がありました。次のデザインを使用して、貼り付け要素と値にアクセスしました。 jsFiddleデモ

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

別のアプローチ：inputイベントはpasteイベントもキャッチします。

$('textarea').bind('input', function () {
    setTimeout(function () { 
        console.log('input event handled including paste event');
    }, 0);
});
3
Shahar Shokrani
$(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');
    }
});
2
Cyrus

フィールドの元の値とフィールドの変更された値を比較し、貼り付けられた値として差額を差し引くことができます。これにより、フィールドに既存のテキストがある場合でも、貼り付けたテキストが正しくキャッチされます。

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);
    });
});
1
Alo Sarv

これはすべてのブラウザで機能し、貼り付けられた値を取得します。また、すべてのテキストボックスに共通のメソッドを作成します。

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

このイベントには、いくつかの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.
    });
});

文字列の連結結果を保持しながら、アイテムを反復処理する必要があります。

アイテムの配列があるという事実から、各アイテムを分析して、さらに作業を行う必要があると思います。また、いくつかのnull/valueチェックを実行する必要があります。

1
Chandler Zwolle

最新のブラウザでは簡単です。 input 属性とともに input イベントを使用するだけです：

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

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

0
Yarin