Element: cut 事件
Clipboard API 的 cut 事件在使用者透過瀏覽器的使用者介面發起了“剪下”操作時觸發。
如果使用者嘗試在不可編輯的內容上執行剪下操作，cut 事件仍會觸發，但事件物件不包含任何資料。
該事件的預設操作是將當前選中的內容（如果存在）複製到系統剪貼簿並從文件中移除。
此事件的事件處理程式可以透過在其 ClipboardEvent.clipboardData 屬性上呼叫 setData(format, data) 來修改剪貼簿內容，並透過 event.preventDefault() 取消預設操作。
請注意，取消預設操作也會阻止文件被更新。因此，想要在修改剪貼簿的同時模擬“剪下”的預設操作的事件處理程式還必須手動從文件中移除選中的內容。
事件處理程式無法讀取剪貼簿資料。
可以構造並分派一個合成的 cut 事件，但這不會影響系統剪貼簿或文件的內容。
此事件會在 DOM 樹中 冒泡，最終到達 Document 和 Window，它是 可取消的，並且是 composed 的。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("cut", (event) => { })
oncut = (event) => { }
事件型別
一個 ClipboardEvent。繼承自 Event。
示例
即時示例
HTML
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
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 和事件 # clipboard-event-cut |
| HTML # handler-oncut |
瀏覽器相容性
載入中…