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) => {};

事件类型

示例

实时示例

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
paste event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见