javascript - 貼り付けイベントへの jQuery バインド、貼り付けの内容を取得する方法

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

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

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

参照: Jquery でペーストを処理するには?

Answer 2

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

.onjq1.7等をお使いの方は是非ご利用ください。

動作:paste最初のテキストエリアに何かを入力すると、下のテキストエリアが変更をキャプチャします。

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

役立つリンク =>

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

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

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

Answer 5

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

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

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

Answer 6

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

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

Answer 7

このイベントには何らかのプロパティが関連付けられているように見えます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/値のチェックも行う必要があります。

Answer 8

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

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