Element: paste イベント
paste
イベントは、ユーザーがブラウザーのユーザーインターフェイスで「貼り付け」操作を行ったときに発生します。
バブリング | あり |
---|---|
キャンセル | 可 |
インターフェイス | ClipboardEvent |
イベントハンドラープロパティ | onpaste |
カーソルが編集可能なコンテキストにある場合 (<textarea>
や contenteditable
属性が true
である要素など)、既定のアクションはクリップボードの内容を文書のカーソル位置に挿入します。
このイベントのハンドラーは、イベントの clipboardData
プロパティにある getData()
を呼び出すことでクリップボードの中身にアクセスすることができます。
既定の動作を上書きする場合 (例えば、別なデータを挿入したりクリップボードの内容を変換したりする場合など)、イベントハンドラーで event.preventDefault()
を使用して既定のアクションをキャンセルした上で、必要なデータを手動で挿入してください。
統合的な paste
イベントを構築して配信することができますが、文書の内容には影響しません。
例
ライブデモ
HTML
<div class="source" contenteditable="true">Try copying text from this box...</div>
<div class="target" contenteditable="true">...and pasting it into this one</div>
JS
const target = document.querySelector('div.target');
target.addEventListener('paste', (event) => {
let paste = (event.clipboardData || window.clipboardData).getData('text');
paste = paste.toUpperCase();
const selection = window.getSelection();
if (!selection.rangeCount) return false;
selection.deleteFromDocument();
selection.getRangeAt(0).insertNode(document.createTextNode(paste));
event.preventDefault();
});
結果
仕様書
仕様書 | 状態 |
---|---|
Clipboard API and events | 草案 |
ブラウザーの対応
BCD tables only load in the browser