From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/element/cut_event/index.html | 119 ++++++++++++++++++++++++++ 1 file changed, 119 insertions(+) create mode 100644 files/ja/web/api/element/cut_event/index.html (limited to 'files/ja/web/api/element/cut_event/index.html') diff --git a/files/ja/web/api/element/cut_event/index.html b/files/ja/web/api/element/cut_event/index.html new file mode 100644 index 0000000000..ca5279af27 --- /dev/null +++ b/files/ja/web/api/element/cut_event/index.html @@ -0,0 +1,119 @@ +--- +title: 'Element: cut イベント' +slug: Web/API/Element/cut_event +tags: + - API + - Clipboard API + - Cut + - Element + - Event + - Reference + - Web + - イベント +translation_of: Web/API/Element/cut_event +--- +
{{APIRef}}
+ +

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

+ +

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

+ + + + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル可
インターフェイス{{domxref("ClipboardEvent")}}
イベントハンドラープロパティ{{domxref("HTMLElement/oncut", "oncut")}}
+ +

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

+ +

このイベントのハンドラーは、 {{domxref("DataTransfer.setData", "setData(format, data)")}} をイベントの {{domxref("ClipboardEvent.clipboardData")}} プロパティに対して呼び出すことで、クリップボードの内容を変更したり、 {{domxref("Event/preventDefault", "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();
+});
+
+ +

結果

+ +

{{ EmbedLiveSample('Live_example', '100%', '100px') }}

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態
{{SpecName('Clipboard API', '#clipboard-event-cut')}}{{Spec2('Clipboard API')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Window.cut_event")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf