DOM

：

：

Element：cut イベント

　編集：2022.09.26 by T.A.

[Edge]。→、

ユーザーがブラウザーのユーザー インターフェイスから「切り取り」操作を実行したときに発生します。

ユーザーが編集不可能なコンテンツに対して切り取りをしようとすると、cut イベントは発生しますが、イベント オブジェクトにはデータが入りません。

イベントの既定のアクションは、（もしあれば）選択範囲をクリップボードへコピーして文書からその部分を取り除くことです。

このイベントのハンドラーは、DataTransfer.setData(format, data) をイベントの ClipboardEvent.clipboardData プロパティに対して呼び出すことで、クリップボードの内容を変更したり、event.preventDefault() を使用して既定の動作を取り消したりすることができます。

なお、既定の動作を取り消すと、文書の更新が阻止されます。そのため、「切り取り」の既定の動作をエミュレートしたい場合は、イベント ハンドラーでクリップボードを操作するとともに、文書から選択範囲を手動で取り除かなければなりません。

このハンドラーがクリップボードのデータを読み取ることはできません。

cut イベントを構築して配信することもできますが、システムのクリップボードには影響を与えません。

バブリング あり
キャンセル 可能
インターフェイス ClipboardEvent
イベント ハンドラー プロパティ oncut
例
mdnより

HTML： 

<div class="source" contenteditable="true">Cut text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</div>

JavaScript： 

const source = document.querySelector('div.source');

source.addEventListener('cut', (event) => {
    const selection = document.getSelection();
    event.clipboardData.setData('text/plain', selection.toString().toUpperCase());
    selection.deleteFromDocument();
    event.preventDefault();
});

HTML： 

<div id=IdTest contenteditable>ここでコピー操作してみてください。</div>
<TEXTAREA id=IdArea>ここに貼り付けしてみてください。</TEXTAREA>

JavaScript： 

function Job(eve){ //イベント処理：
  D=eve; //＝[object]：[object ClipboardEvent]
	//isTrusted＝[boolean]：true
	//clipboardData＝[object]：[object DataTransfer]
	//type＝[string]：cut
	//target＝[object]：[object HTMLDivElement]
	//currentTarget＝[object]：null
	//eventPhase＝[number]：0
	//bubbles＝[boolean]：true
	//cancelable＝[boolean]：true
	//defaultPrevented＝[boolean]：true
	//composed＝[boolean]：true
	//…
  eve.preventDefault(); //規定のcut処理をしないようにブラウザーに通告する。
  let E=eve.target;     //イベントが起きた要素。
  E.style.backgroundColor="#fee"; //その要素に変化をさせる。
}
IdTest.oncut=Job;

→DataTransfer。

テスト