このページは、現在の仕様の振る舞いと一致するよう更新する必要があります。更新されるまでは仕様書を参照してください。 https://www.w3.org/TR/clipboard-apis/#the-paste-action

paste イベントは、選択範囲がクリップボードから document に貼り付けられた時に発火します。

バブル
キャンセル
対象オブジェクト DefaultView, Document, Element
インターフェイス ClipboardEvent

プロパティ

プロパティ 説明
target 読取専用 EventTarget イベントの対象 (DOM ツリー上で最上位の対象)。
type 読取専用 DOMString イベントの型。
bubbles 読取専用 boolean イベントが通常バブルするか
cancelable 読取専用 boolean イベントがキャンセル可能か
clipboardData 読取専用 DataTransfer クリップボードの中身。テキストだけでなく、ファイルや画像の可能性もある。

使用例

HTML

<textarea></textarea>

<div contenteditable="true"></div>

JavaScript

document.querySelector('textarea').addEventListener('paste', (e) => {
  console.log(e);
  window.setTimeout(() => {
    // Do something immediately after the paste event
  });
});

document.querySelector('div').addEventListener('paste', (e) => {
  console.log(e);
  window.setTimeout(() => {
    // Do something immediately after the paste event
  });
});

貼り付け前にクリップボードの内容を変更

HTML

<div contenteditable="true"></div>

JavaScript

document.querySelector('div').addEventListener('paste', (e) => {
  // Prevent the default pasting event and stop bubbling
  e.preventDefault();
  e.stopPropagation();

  // Get the clipboard data
  let paste = (e.clipboardData || window.clipboardData).getData('text');
  
  // Do something with paste like remove non-UTF-8 characters
  paste = paste.replace(/[^\x20-\xFF]/gi, '');

  // Find the cursor location or highlighted area
  const selection = window.getSelection();

  // Cancel the paste operation if the cursor or highlighted area isn't found
  if (!selection.rangeCount) return false;

  // Paste the modified clipboard content where it was intended to go
  selection.getRangeAt(0).insertNode(document.createTextNode(paste));
});

仕様書

仕様書 状態 備考
W3C Working Draft, 29 September 2017 Working Draft https://www.w3.org/TR/clipboard-apis/#clipboard-event-paste

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本対応 58 (有) (有) 11 45 (有)
clipboardData 58 (有) 22 (22) 未サポート (代わりに window.clipboardData を使用) 45 (有)
機能 Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本対応 58 58 (有) ? ? 45 ?
clipboardData 58 58 (有) ? ? 45 ?

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

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