SVGGraphicsElement: 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 wird auf einem SVGGraphicsElement 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 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 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 die gewünschten Daten manuell einfügen.

Es ist möglich, ein synthetisches paste-Ereignis zu erstellen und auszulösen, aber dies wirkt sich nicht auf den Inhalt des Dokuments aus.

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

Beispiel

HTML

html
<?xml version="1.0" encoding="UTF-8"?>
<svg
  viewBox="0 0 140 30"
  width="600"
  height="320"
  xmlns="http://www.w3.org/2000/svg">
  <foreignObject x="5" y="-10" width="90" height="20">
    <input xmlns="http://www.w3.org/1999/xhtml" value="Copy this text" />
  </foreignObject>
  <text x="5" y="30" id="element-to-paste-text" tabindex="1">
    Paste it here
  </text>
</svg>

CSS

css
input {
  font-size: 10px;
  width: 100%;
  height: 90%;
  box-sizing: border-box;
  border: 1px solid black;
}

JavaScript

js
document
  .getElementById("element-to-paste-text")
  .addEventListener("paste", (evt) => {
    evt.target.textContent = evt.clipboardData
      .getData("text/plain")
      .toUpperCase();
    evt.preventDefault();
  });

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

Siehe auch