Element: paste event
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.
Das paste Ereignis der Clipboard API wird ausgelöst, wenn der Benutzer eine "Paste"-Aktion über die Benutzeroberfläche des Browsers initiiert hat.
Wenn sich der Cursor in einem editierbaren Kontext befindet (beispielsweise in einem <textarea> oder einem Element mit dem contenteditable Attribut, das auf true gesetzt ist), besteht die Standardaktion darin, den Inhalt der Zwischenablage an der Cursorposition in das Dokument einzufügen.
Ein Handler für dieses Ereignis kann auf die Inhalte der Zwischenablage zugreifen, indem er getData() auf die clipboardData-Eigenschaft des Ereignisses aufruft.
Um das Standardverhalten zu überschreiben (zum Beispiel um andere Daten oder eine Transformation des Zwischenablageinhalts einzufügen), muss ein Ereignishandler die Standardaktion mit event.preventDefault() abbrechen und dann die gewünschten Daten manuell einfügen.
Es ist möglich, ein synthetisches paste-Ereignis zu erstellen und auszulösen, aber dies wird die Inhalte des Dokuments nicht beeinflussen.
Dieses Ereignis bubbelt, ist abbrechbar und ist komponiert.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("paste", (event) => {});
onpaste = (event) => {};
Ereignistyp
Ein ClipboardEvent. Erbt von Event.
Beispiele
Live-Beispiel
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
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();
});
Ergebnis
Spezifikationen
| Specification |
|---|
| Clipboard API and events # clipboard-event-paste |
| HTML # handler-onpaste |