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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
paste eventChrome 完全対応 58Edge 完全対応 ありFirefox 完全対応 ありIE 完全対応 11Opera 完全対応 45Safari 完全対応 ありWebView Android 完全対応 58Chrome Android 完全対応 58Edge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 43Safari iOS ? Samsung Internet Android ?
clipboardDataChrome 完全対応 58Edge 完全対応 ありFirefox 完全対応 22IE 未対応 なしOpera 完全対応 45Safari 完全対応 ありWebView Android 完全対応 58Chrome Android 完全対応 58Edge Mobile 完全対応 ありFirefox Android 完全対応 22Opera Android 完全対応 43Safari iOS ? Samsung Internet Android ?

凡例

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

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, wbamberg, mdnwebdocs-bot, fscholz, Marsf
最終更新者: mfuji09,