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 July 2015.
Das paste-Ereignis der Zwischenablage-API wird ausgelöst, wenn der Nutzer über die Benutzeroberfläche des Browsers eine "Einfügen"-Aktion initiiert hat.
Befindet sich der Cursor in einem editierbaren Kontext (zum Beispiel in einem <textarea> oder einem Element mit dem Attribut contenteditable auf true gesetzt), erfolgt die Standardeaktion, die Inhalte der Zwischenablage an der Cursorposition in das Dokument einzufügen.
Ein Handler für dieses Ereignis kann auf den Inhalt der Zwischenablage zugreifen, indem er getData() auf der clipboardData-Eigenschaft des Ereignisses aufruft.
Um das Standardverhalten zu überschreiben (zum Beispiel um 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 konstruieren und auszulösen, aber dies wird den Inhalt des Dokuments nicht beeinflussen.
Dieses Ereignis blubbert, ist abbruchsbereit und ist zusammengesetzt.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-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 |