Element: paste イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

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

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

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

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

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

構文

このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

addEventListener("paste", (event) => {});
onpaste = (event) => {};

HTML

html

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

div.source,
div.target {
 border: 1px solid gray;
 margin: 0.5rem;
 padding: 0.5rem;
 height: 1rem;
 background-color: #e9eef1;
}

JS

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));
 selection.collapseToEnd();
});