Element: cut イベント

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

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

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

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

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

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

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

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

ライブデモ

HTML

<div class="source" contenteditable="true">Try cutting text from this box...</div>
<div class="target" contenteditable="true">...and pasting it into this one</div>

JS

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();
});

結果

仕様書

仕様書 状態
Clipboard API and events 草案

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
cut eventChrome 完全対応 58Edge 完全対応 ありFirefox 完全対応 ありIE 未対応 なしOpera 完全対応 45Safari 完全対応 ありWebView Android 完全対応 58Chrome Android 完全対応 58Firefox Android 完全対応 ありOpera Android 完全対応 43Safari iOS ? Samsung Internet Android 完全対応 7.0
clipboardDataChrome 完全対応 58Edge 完全対応 ありFirefox 完全対応 22IE 未対応 なしOpera 完全対応 45Safari 完全対応 ありWebView Android 完全対応 58Chrome Android 完全対応 58Firefox Android 完全対応 22Opera Android 完全対応 43Safari iOS ? Samsung Internet Android 完全対応 7.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連情報