web-dev-qa-db-ja.com

JavaScriptで貼り付けイベントをインターセプトする

JavaScriptで貼り付けイベントをインターセプトし、未加工の値を取得して変更し、関連するDOM要素の値を変更された値に設定する方法はありますか？

たとえば、スペースを含む文字列をコピーして貼り付けようとしているユーザーがいて、文字列の長さがテキストボックスの最大長を超えています。テキストをインターセプトし、スペースを削除してから、テキストボックスの値に変更値を設定します。

これは可能ですか？

javascriptdomcopy-pastepaste
49
Brandon

"onpaste"ハンドラーをアタッチすることで貼り付けイベントをインターセプトし、IEまたは "window.clipboardData.getData('Text')"で "event.clipboardData.getData('text/plain')"を使用して貼り付けたテキストを取得できます。他のブラウザで。

例えば：

var myElement = document.getElementById('pasteElement');
myElement.onpaste = function(e) {
  var pastedText = undefined;
  if (window.clipboardData && window.clipboardData.getData) { // IE
    pastedText = window.clipboardData.getData('Text');
  } else if (e.clipboardData && e.clipboardData.getData) {
    pastedText = e.clipboardData.getData('text/plain');
  }
  alert(pastedText); // Process and handle text...
  return false; // Prevent the default handler from running.
};

@pimvdbが指摘しているように、「e.originalEvent.clipboardData "jQueryを使用する場合。

78
maerics

たまたま今日、私は 類似した質問 に答えました。つまり、貼り付けイベントが発生したときにキャレットを画面外のテキスト領域にリダイレクトするには、ハックが必要です。

3
Tim Down
$(document).ready(function() {
    $("#editor").bind('paste', function (e){
        $(e.target).keyup(getInput);
    });

    function getInput(e){
        var inputText = $(e.target).val();
        alert(inputText);
        $(e.target).unbind('keyup');
    }
});
1
Cyrus

スペースバーを使用できるようにしながら、貼り付けたものすべてに「トリム」を実装する必要がありました（先頭と末尾の空白をすべて削除します）。

Ctrl + V、Shift + Insert、およびマウスの右クリック貼り付けの場合、FF、IE11および2017年2月22日現在のChrome

$(document).ready(function() {
    var lastKeyCode = 0;

    $('input[type="text"]').bind('keydown', function(e) {
        lastKeyCode = e.keyCode;
    });
    // Bind on the input having changed.  As long as the previous character
    // was not a space, BS or Del, trim the input.
    $('input[type="text"]').bind('input', function(e) {
        if(lastKeyCode != 32 && lastKeyCode != 8 && lastKeyCode != 46) {
            $(this).val($(this).val().replace(/^\s+|\s+$/g, ''));
        }
    });
});

2つの注意事項：

  1. 貼り付けが行われたときにテキストが既に存在する場合、貼り付けられているものだけでなく、結果全体でトリミングが行われます。

  2. ユーザーがスペースまたはBSまたはDelを入力してから貼り付けた場合、トリミングは行われません。

1
Craig Silver