Element: paste-Ereignis

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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

Befindet sich der Cursor in einem bearbeitbaren Bereich (beispielsweise in einem <textarea> oder einem Element, dessen Attribut contenteditable auf true gesetzt ist), wird standardmäßig der Inhalt der Zwischenablage an der Cursorposition in das Dokument eingefügt.

Ein Handler für dieses Ereignis kann auf den Inhalt der Zwischenablage zugreifen, indem er getData() für die clipboardData-Eigenschaft des Ereignisses aufruft.

Um das Standardverhalten zu überschreiben (beispielsweise um andere Daten oder eine veränderte Fassung des Inhalts der Zwischenablage einzufügen), muss ein Event-Handler die Standardaktion mit event.preventDefault() verhindern und anschließend die gewünschten Daten manuell einfügen.

Ein synthetisches paste-Ereignis kann erstellt und ausgelöst werden. Dies wirkt sich jedoch nicht auf den Inhalt des Dokuments aus.

Dieses Ereignis steigt im DOM-Baum bis zu Document und Window auf, ist abbrechbar und composed.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:

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