HTMLElement: paste イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

paste イベントは、ユーザーがブラウザーのユーザーインターフェイスから貼り付け操作を行おうとした時に発行されます。

構文

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

js
addEventListener("paste", (event) => {});

onpaste = (event) => {};

イベント型

ClipboardEvent です。 Event を継承しています。

Event ClipboardEvent

イベントプロパティ

親である Event から継承したプロパティもあります。

ClipboardEvent.clipboardData 読取専用

DataTransfer オブジェクトで、ユーザーが行った cutcopypaste のいずれかの操作によって影響されたデータと MIME タイプが入ります。

この例では、 <textarea> からのすべてのコピーと貼り付けを記録します。

HTML

html
<h3>このテキストエリアで実行してみる</h3>
<textarea id="editor" rows="3">
このフィールドにテキストをコピー&ペーストしてみてください。
</textarea>

<h3>ログ:</h3>
<p id="log"></p>

JavaScript

js
function logCopy(event) {
  log.innerText = `コピーされました。\n${log.innerText}`;
}

function logPaste(event) {
  log.innerText = `貼り付けされました。\n${log.innerText}`;
}

const editor = document.getElementById("editor");
const log = document.getElementById("log");

editor.oncopy = logCopy;
editor.onpaste = logPaste;

結果

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報

  • 関連イベント:
    • copy イベント
    • cut イベント