HTMLElement: copy イベント

Invalid slug for templ/sidebar: conflicting/Web/API/Element/copy_event

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

構文

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

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

oncopy = (event) => {};

イベント型

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

Event ClipboardEvent

イベントプロパティ

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

ClipboardEvent.clipboardData 読取専用

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

例

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

HTML

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

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

JavaScript

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

function logCopy(event) {
  log.innerText = `コピーがブロックされました。\n${log.innerText}`;
  event.preventDefault();
}

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

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

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

結果

仕様書

No specification found

No specification data found for undefined.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

ブラウザーの互換性

関連情報