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 Clipboard API wird ausgelöst, wenn der Benutzer eine "Einfügen"-Aktion über die Benutzeroberfläche des Browsers initiiert hat.

Wenn sich der Cursor in einem editierbaren Kontext befindet (zum Beispiel in einer <textarea> oder einem Element mit dem contenteditable-Attribut auf true gesetzt), ist die Standardaktion, 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 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 die gewünschten Daten manuell einfügen.

Es ist möglich, ein synthetisches paste-Ereignis zu konstruieren und abzusetzen, aber dies wird die Inhalte des Dokuments nicht beeinflussen.

Dieses Ereignis bubbles den DOM-Baum hinauf, letztendlich bis zum Document und Window, ist abbrechbar und ist komponiert.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignis-Handler-Eigenschaft.

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

onpaste = (event) => { }

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>

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

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

Siehe auch

cut-Ereignis
copy-Ereignis