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 |
浏览器兼容性
加载中…