Element: paste 事件
Clipboard API 中的 paste 事件会在用户通过浏览器用户界面触发“粘贴”操作时触发。
如果光标位于一个可编辑的上下文中（例如，在 <textarea> 或 contenteditable 属性设置为 true 的元素中），则默认操作是将剪贴板的内容插入到文档的光标位置。
此事件的处理程序可以通过调用事件的 clipboardData 属性上的 getData() 来访问剪贴板内容。
要覆盖默认行为（例如插入一些不同的数据或剪贴板内容的转换），事件处理程序必须使用 event.preventDefault() 取消默认操作，然后手动插入其所需的数据。
可以构造和分派一个 合成的 paste 事件，但这不会影响文档的内容。
此事件会在 DOM 树中 冒泡，最终到达 Document 和 Window，它是 可取消的，并且是 composed 的。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("paste", (event) => { })
onpaste = (event) => { }
事件类型
一个 ClipboardEvent。继承自 Event。
示例
实时示例
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();
});
结果
规范
| 规范 |
|---|
| Clipboard API 和事件 # clipboard-event-paste |
| HTML # handler-onpaste |
浏览器兼容性
加载中…