HTMLElement: cut イベント
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.
cut
イベントは、ユーザーがブラウザーのユーザーインターフェイスから切り取り操作を行おうとした時に発行されます。
構文
このイベント名を addEventListener()
のようなメソッドで使用するか、イベントハンドラープロパティを設定するかします。
js
addEventListener("cut", (event) => {});
oncut = (event) => {};
イベント型
ClipboardEvent
です。 Event
を継承しています。
イベントプロパティ
親である 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
function logCopy(event) {
log.innerText = `Copied!\n${log.innerText}`;
}
function preventCut(event) {
event.preventDefault();
log.innerText = `Cut blocked!\n${log.innerText}`;
}
const editor = document.getElementById("editor");
const log = document.getElementById("log");
editor.oncopy = logCopy;
editor.oncut = preventCut;
結果
仕様書
Specification |
---|
Clipboard API and events # clipboard-event-cut |
HTML Standard # handler-oncut |
ブラウザーの互換性
BCD tables only load in the browser