Element: paste イベント

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

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

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

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

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

構文

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

addEventListener('paste', (event) => { });

onpaste = (event) => { };

イベント型

ClipboardEvent です。 Event から継承しています。

Event ClipboardEvent

例

ライブデモ

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

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));
});

結果

仕様書

Specification
Clipboard API and events
# clipboard-event-paste
HTML Standard
# handler-onpaste

ブラウザーの互換性

BCD tables only load in the browser

関連情報