Element：cut 事件

当用户通过浏览器的用户界面发起“剪切”动作时，将触发 cut 事件。

如果用户尝试对不可编辑内容执行剪切操作，则 cut 事件仍会触发，但事件对象不包含任何数据。

该事件的默认行为是将当前选中的内容（如有）复制到系统剪贴板，并从当前文档中移除。

事件处理器可以通过调用 ClipboardEvent.clipboardData 属性上的 setData(format, data) 修改剪贴板内容，并通过 event.preventDefault() 取消默认行为。

但是请注意，取消默认动作也会阻止文档被更新。所以一个事件处理器想要在修改剪贴板时模仿默认动作“剪切”，也必须手动从文档中删除选择。

事件处理器不可以读取剪贴板数据。

可以构建和派发一个合成 cut 事件，但这不会影响系统剪贴板或文档内容。

语法

在类似于 addEventListener() 这样的方法中使用事件名，或设置事件处理器属性。

js

addEventListener("cut", (event) => {});

oncut = (event) => {};

事件类型

ClipboardEvent。继承自 Event。

Event ClipboardEvent

示例

实时示例

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

参见