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
。
示例
实时示例
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