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 March 2017.

Das paste-Ereignis der Clipboard 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 contenteditable Attribut auf true gesetzt), 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 getData() für die clipboardData-Eigenschaft des Ereignisses aufgerufen wird.

Um das Standardverhalten zu überschreiben (zum Beispiel, um andere Daten oder eine Transformation des Zwischenablageinhalts einzufügen), muss ein Ereignishandler die Standardaktion mit event.preventDefault() abbrechen und anschließend die 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 bubbelt, ist abbrechbar und ist komponiert.

Syntax

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

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

onpaste = (event) => {};

Event-Typ

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 Standard
# handler-onpaste

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch