Element：cut 事件

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

当用户通过浏览器的用户界面发起“剪切”动作时，将触发 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

参见