DOM

：

：

Element：paste イベント

　編集：2022.09.26 by T.A.

[Edge]。→、

ユーザーがブラウザーのユーザー インターフェイスで「貼り付け」操作を行ったときに発生します。

カーソルが編集可能なコンテキストにある場合（<textarea> や contenteditable 属性が true の要素など）、既定のアクションはクリップボードの内容を文書のカーソル位置に挿入します。

このイベントのハンドラーは、イベントの clipboardData プロパティにある DataTransfer.getData() を呼び出すことでクリップボードの中身にアクセスすることができます。

既定の動作を上書きする場合（例えば、別なデータを挿入したりクリップボードの内容を変換したりする場合など)、イベントハンドラーで event.preventDefault() を使用して既定のアクションをキャンセルした上で、必要なデータを手動で挿入してください。

paste イベントを構築して配信することができますが、文書の内容には影響しません。

バブリング あり
キャンセル 可能
インターフェイス ClipboardEvent
イベント ハンドラー プロパティ onpaste
例
mdnより

HTML： 

<div class="source" contenteditable="true">Copy text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</div>

JavaScript： 

const target = document.querySelector('div.target');

target.addEventListener('paste', (event) => {
    event.preventDefault();

    let paste = (event.clipboardData || window.clipboardData).getData('text');
    paste = paste.toUpperCase();
    const selection = window.getSelection();
    if (!selection.rangeCount) return;
    selection.deleteFromDocument();
    selection.getRangeAt(0).insertNode(document.createTextNode(paste));
});

HTML： 

<TEXTAREA id=IdTest>ここに貼り付けしてみてください。</TEXTAREA>

JavaScript： 

function Job(eve){ //イベントが起きた時の処理：eve には ClipboardEvent オブジェクトが入りました。
  D=eve; //＝[object]：[object ClipboardEvent]
	//isTrusted＝[boolean]：true
	//clipboardData＝[object]：[object DataTransfer]
	//type＝[string]：paste
	//target＝[object]：[object HTMLTextAreaElement]
	//currentTarget＝[object]：null
	//eventPhase＝[number]：0
	//bubbles＝[boolean]：true
	//cancelable＝[boolean]：true
	//defaultPrevented＝[boolean]：false
	//composed＝[boolean]：true
	//…
  DA=eve.clipboardData; //＝[object]：[object DataTransfer]
	//dropEffect＝[string]：none
	//effectAllowed＝[string]：uninitialized
	//items＝[object]：[object DataTransferItemList]
	//types＝[object]：
	//files＝[object]：[object FileList]
	//clearData＝[function]：function clearData() { [native code] }
	//…
  alert(DA.getData('text')); //貼り付けられたテキストを表示。
  let E=eve.target;               //イベントが起きた要素を取得。
  E.style.backgroundColor="#fee"; //表現。
}
IdTest.onpaste=Job;

→DataTransfer。

テスト