View in EnglishAlways switch to English

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 2015年7月.

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

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

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

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

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

语法

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

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

事件类型

ClipboardEvent。继承自Event。

示例

实时示例

HTML

html

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

div.source,div.target {  border: 1px solid gray;  margin: 0.5rem;  padding: 0.5rem;  height: 1rem;  background-color: #e9eef1;}

JavaScript

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();});