HTMLElement: copy イベント
copy
イベントは、ユーザーがブラウザーのユーザーインターフェイスからコピー操作を行おうとした時に発行されます。
構文
このイベント名を addEventListener()
のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener('copy', event => { });
oncopy = event => { };
イベント型
ClipboardEvent
です。 Event
を継承しています。
イベントプロパティ
親である Event
から継承したプロパティもあります。
ClipboardEvent.clipboardData
読取専用-
DataTransfer
オブジェクトで、ユーザーが行ったcut
,copy
,paste
操作によって影響されたデータと MIME タイプが入ります。
例
この例では、 <textarea>
からのすべてのコピーと貼り付けをブロックします。
HTML
<h3>このテキストエリアで実行してみる</h3>
<textarea id="editor" rows="3">このフィールドにテキストをコピー&ペーストしてみてください。</textarea>
<h3>ログ:</h3>
<p id="log"></p>
JavaScript
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;
結果
仕様書
Specification |
---|
Clipboard API and events # clipboard-event-copy |
HTML Standard # handler-oncopy |
ブラウザーの互換性
BCD tables only load in the browser