元素：粘贴事件

paste 事件是 剪贴板 API 的一部分，当用户通过浏览器的用户界面发起“粘贴”操作时触发。

如果光标位于可编辑的上下文中（例如，在 <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">Copy text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</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();
});

结果

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅