Element: paste イベント
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
paste イベントは、ユーザーがブラウザーのユーザーインターフェイスで「貼り付け」操作を行ったときに発生します。
カーソルが編集可能なコンテキストにある場合（<textarea> や contenteditable 属性が true の要素など）、既定のアクションはクリップボードの内容を文書のカーソル位置に挿入します。
このイベントのハンドラーは、イベントの clipboardData プロパティにある getData() を呼び出すことでクリップボードの中身にアクセスすることができます。
既定の動作を上書きする場合（例えば、別なデータを挿入したりクリップボードの内容を変換したりする場合など）、イベントハンドラーで event.preventDefault() を使用して既定のアクションをキャンセルした上で、必要なデータを手動で挿入してください。
合成した paste イベントを構築して配信することができますが、文書の内容には影響しません。
構文
このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
js
addEventListener("paste", (event) => {});
onpaste = (event) => {};
イベント型
ClipboardEvent です。 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>
JS
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();
});
結果
仕様書
| 仕様書 |
|---|
| Clipboard API and events # clipboard-event-paste |
| HTML # handler-onpaste |