JavaScript-Zwischenablagedaten

Der heutige Beitrag wird das Erkennen von Zwischenablagedaten bei paste-Ereignissen in JavaScript lehren.

JavaScript-Zwischenablagedaten

Das Ereignis Einfügen wird ausgelöst, wenn der Benutzer über die Benutzeroberfläche des Browsers eine Aktion Einfügen auslöst.

Wenn sich der Cursor in einem bearbeitbaren Kontext befindet, 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() für die Eigenschaft clipboardData des Ereignisses aufruft.

Ein Event-Handler muss die Standardaktion mit event.preventDefault() aufheben und die gewünschten Daten manuell einfügen, um das Standardverhalten zu überschreiben. Es ist möglich, ein synthetisches Einfügungsereignis zu erstellen und zu senden, aber dies wirkt sich nicht auf den Inhalt des Dokuments aus.

Die Methode addEventListener() der EventTarget-Schnittstelle konfiguriert eine Funktion, die immer dann aufgerufen wird, wenn das angegebene Ereignis an das Ziel geliefert wird.

Nehmen wir ein Beispiel, definieren Sie zwei div-Elemente. Einmal mit der Quelle und einmal mit dem Ziel.

Source Div enthält die Daten, von denen kopiert werden soll, und das Ziel ist der Ort, an dem die kopierten Daten eingefügt werden.

<div class="source">Hello World!</div>
<div class="destination" contenteditable="true">...Good Bye!</div>

const destinationElement = document.querySelector('div.destination');

destinationElement.addEventListener('paste', (event) => {
  const paste = (event.clipboardData || window.clipboardData).getData('text');
  console.log(paste);

  const selection = window.getSelection();
  selection.deleteFromDocument();
  selection.getRangeAt(0).insertNode(document.createTextNode(paste));
  event.preventDefault();
});

Im obigen Beispiel wählen wir zuerst das Zielelement mit dem querySelector aus. Sobald das Element ausgewählt ist, warten wir auf das Ereignis Einfügen.

Sobald der Benutzer die Daten einfügt, werden die Zwischenablagedaten aus dem Ereignis extrahiert.

Ursprünglicher Inhalt wird aus dem Zielelement gelöscht und neuer Inhalt wird in das Zielelement eingefügt. Versuchen Sie, den obigen Code in einem beliebigen Browser auszuführen, der das Ereignis Einfügen unterstützt. Sie erhalten das folgende Ergebnis.

Vor:

Nach:

Demo hier