Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

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.

js
addEventListener("paste", (event) => { })

onpaste = (event) => { }

Ereignistyp

Ein ClipboardEvent, erbt von Event.

Event ClipboardEvent

Beispiele

Live-Beispiel

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();
});

Ergebnis

Spezifikationen

Specification
Clipboard API and events
# clipboard-event-paste
HTML
# handler-onpaste

Browser-Kompatibilität

Siehe auch