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 |
瀏覽器相容性
載入中…