このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
js
addEventListener("paste", (event) => {});onpaste = (event) => {};イベント型
ClipboardEvent です。Event から継承しています。
例
ライブデモ
HTML
html
<div contenteditable="true">Copy text from this box.</div><div 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
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();});結果
仕様書
| Specification |
|---|
| Clipboard API and events # clipboard-event-paste |
| HTML # handler-onpaste |