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 完全対応 12Firefox 完全対応 22IE 完全対応 11Opera 完全対応 45Safari 完全対応 5WebView Android 完全対応 58Chrome Android 完全対応 58Firefox Android 完全対応 22Opera Android 完全対応 43Safari iOS 完全対応 4.2Samsung Internet Android 完全対応 7.0
clipboardDataChrome 完全対応 58Edge 完全対応 ≤18Firefox 完全対応 22IE 未対応 なしOpera 完全対応 45Safari 完全対応 ありWebView Android 完全対応 58Chrome Android 完全対応 58Firefox Android 完全対応 22Opera Android 完全対応 43Safari iOS 完全対応 ありSamsung Internet Android 完全対応 7.0

凡例

完全対応  
完全対応
未対応  
未対応

関連情報