Element:cut 事件
当用户通过浏览器的用户界面发起“剪切”动作时,将触发 cut
事件。
如果用户尝试对不可编辑内容执行剪切操作,则 cut
事件仍会触发,但事件对象不包含任何数据。
该事件的默认行为是将当前选中的内容(如有)复制到系统剪贴板,并从当前文档中移除。
事件处理器可以通过调用 ClipboardEvent.clipboardData
属性上的 setData(format, data)
修改剪贴板内容,并通过 event.preventDefault()
取消默认行为。
但是请注意,取消默认动作也会阻止文档被更新。所以一个事件处理器想要在修改剪贴板时模仿默认动作“剪切”,也必须手动从文档中删除选择。
事件处理器不可以读取剪贴板数据。
可以构建和派发一个合成 cut
事件,但这不会影响系统剪贴板或文档内容。
语法
在类似于 addEventListener()
这样的方法中使用事件名,或设置事件处理器属性。
js
addEventListener("cut", (event) => {});
oncut = (event) => {};
事件类型
ClipboardEvent
。继承自 Event
。
示例
实时示例
HTML
html
<div class="source" contenteditable="true">从这个盒子剪切文字</div>
<div class="target" contenteditable="true">在这里粘贴</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();
});
结果
规范
Specification |
---|
Clipboard API and events # clipboard-event-cut |
HTML Standard # handler-oncut |
浏览器兼容性
BCD tables only load in the browser