Element：paste 事件

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.

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

如果光标处于可编辑的上下文中（例如，在 <textarea> 或 contenteditable 属性设置为 true 的元素中），那么默认动作是将剪贴板的内容插入光标位置的文档中。

事件处理器可以通过调用事件 clipboardData 属性的 getData() 方法来访问剪贴板内容。

要覆盖默认行为（例如插入一些不同的数据或转换剪贴板内容），事件处理程序必须使用 event.preventDefault() 取消默认动作，然后手动插入其想要的数据。

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

语法

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

js
addEventListener("paste", (event) => {});

onpaste = (event) => {};

事件类型

ClipboardEvent。继承自 Event。

Event ClipboardEvent

示例

实时示例

HTML

html
<div class="source" contenteditable="true">从这个盒子复制文字</div>
<div class="target" contenteditable="true">在这里粘贴</div>

JavaScript

js
const target = document.querySelector("div.target");

target.addEventListener("paste", (event) => {
  event.preventDefault();

  let paste = (event.clipboardData || window.clipboardData).getData("text");
  paste = paste.toUpperCase();
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  selection.deleteFromDocument();
  selection.getRangeAt(0).insertNode(document.createTextNode(paste));
  selection.collapseToEnd();
});

结果

规范

Specification
Clipboard API and events
# clipboard-event-paste
HTML Standard
# handler-onpaste

浏览器兼容性

BCD tables only load in the browser

参见