Element: paste-Ereignis

Das paste-Ereignis der Clipboard API wird ausgelöst, wenn der Benutzer eine "Einfügen"-Aktion über die Benutzeroberfläche des Browsers initiiert hat.

Befindet sich der Cursor in einem editierbaren Kontext (zum Beispiel in einem <textarea> oder einem Element mit dem contenteditable-Attribut, das auf true gesetzt ist), dann besteht die Standardaktion darin, den Inhalt 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 einige andere Daten oder eine Transformation des Zwischenablage-Inhalts 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 konstruieren und auszulösen, aber dies wird die Inhalte des Dokuments nicht beeinflussen.

Dieses Ereignis bubbles, ist cancelable und ist composed.

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

onpaste = (event) => {};

<div class="source" contenteditable="true">Copy text from this box.</div>
<div class="target" contenteditable="true">And paste it into this one.</div>

div.source,
div.target {
  border: 1px solid gray;
  margin: 0.5rem;
  padding: 0.5rem;
  height: 1rem;
  background-color: #e9eef1;
}

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