元素：剪切事件

cut 事件是 剪贴板 API 的事件，当用户通过浏览器的用户界面启动“剪切”操作时会触发该事件。

如果用户尝试对不可编辑的内容进行剪切操作，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">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();
});

结果

规范

规范
剪贴板 API 和事件
# clipboard-event-cut
HTML 标准
# handler-oncut

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅