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 草案

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
paste eventChrome 完全対応 58Edge 完全対応 ありFirefox 完全対応 ありIE 完全対応 11Opera 完全対応 45Safari 完全対応 ありWebView Android 完全対応 58Chrome Android 完全対応 58Firefox Android 完全対応 ありOpera Android 完全対応 43Safari iOS ? Samsung Internet Android ?
clipboardDataChrome 完全対応 58Edge 完全対応 ありFirefox 完全対応 22IE 未対応 なしOpera 完全対応 45Safari 完全対応 ありWebView Android 完全対応 58Chrome Android 完全対応 58Firefox Android 完全対応 22Opera Android 完全対応 43Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連情報