Element: paste Ereignis
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Das paste
-Ereignis der Clipboard API wird ausgelöst, wenn der Benutzer im Browser eine "Einfügen"-Aktion über die Benutzeroberfläche initiiert hat.
Befindet sich der Cursor in einem bearbeitbaren Kontext (zum Beispiel in einem <textarea>
oder in einem Element mit dem contenteditable
-Attribut, das auf true
gesetzt ist), dann besteht die Standardaktion darin, die Inhalte der Zwischenablage an der Cursorposition in das Dokument einzufügen.
Ein Handler für dieses Ereignis kann auf die Inhalte der Zwischenablage zugreifen, indem getData()
auf der clipboardData
-Eigenschaft des Ereignisses aufgerufen wird.
Um das Standardverhalten zu überschreiben (zum Beispiel, um einige andere Daten oder eine Transformation der Zwischenablageinhalte einzufügen), muss ein Ereignishandler die Standardaktion mit event.preventDefault()
abbrechen und dann seine 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 den DOM-Baum hinauf, schließlich zum Document
und Window
, ist abbrechbar und ist zusammengesetzt.
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> |
Browser-Kompatibilität
Loading…