So verwenden Sie die Clipboard-API in JS

1. Document.execCommand()-Methode

Document.execCommand() ist die traditionelle Methode zum Bedienen der Zwischenablage und wird von verschiedenen Browsern unterstützt.

Es unterstützt drei Vorgänge: Kopieren, Ausschneiden und Einfügen.

• document.execCommand('kopieren')
• document.execCommand('ausschneiden')
• document.execCommand('einfügen')

(1) Kopiervorgang

Beim Kopieren wählen Sie zunächst den Text aus, rufen dann document.execCommand('copy') auf und der ausgewählte Text wird der Zwischenablage hinzugefügt.

const inputElement = document.querySelector('#input');
Eingabeelement.Auswählen();
document.execCommand('kopieren');

Im obigen Beispiel wählt das Skript zuerst den Text im Eingabeelement inputElement aus (inputElement.select()) und kopiert ihn dann mit document.execCommand('copy') in die Zwischenablage.

Beachten Sie, dass der Kopiervorgang am besten in einer Ereignisüberwachungsfunktion platziert wird, die vom Benutzer ausgelöst wird (z. B. wenn der Benutzer auf eine Schaltfläche klickt). Einige Browser melden möglicherweise einen Fehler, wenn das Skript autonom ausgeführt wird.

(2) Einfügevorgang

Beim Einfügen wird durch den Aufruf von document.execCommand('paste') der Inhalt der Zwischenablage an das aktuell fokussierte Element ausgegeben.

const pasteText = document.querySelector('#Ausgabe');
Text einfügen.Fokus();
document.execCommand('einfügen');

(3) Nachteile

Obwohl die Methode Document.execCommand() praktisch ist, hat sie einige Nachteile.

Erstens kann es nur den ausgewählten Inhalt in die Zwischenablage kopieren und nicht beliebigen Inhalt in die Zwischenablage schreiben.

Zweitens handelt es sich um einen synchronen Vorgang. Wenn Sie eine große Datenmenge kopieren/einfügen, kommt es zu Verzögerungen auf der Seite. Einige Browser öffnen außerdem ein Eingabeaufforderungsfenster, in dem Sie um die Erlaubnis des Benutzers gebeten werden. Die Seite reagiert dann nicht mehr, bevor der Benutzer eine Auswahl trifft.

Um diese Probleme zu lösen, haben Browserhersteller die asynchrone Clipboard-API vorgeschlagen.

2. Asynchrone Zwischenablage-API

Die Clipboard-API ist die nächste Generation der Clipboard-Bedienungsmethode, die leistungsfähiger und kostengünstiger ist als die herkömmliche Methode document.execCommand().

Alle Vorgänge sind asynchron und geben Promise-Objekte zurück, wodurch es nicht zu Seitenverzögerungen kommt. Darüber hinaus können beliebige Inhalte (z. B. Bilder) in die Zwischenablage eingefügt werden.

Die Eigenschaft navigator.clipboard gibt das Clipboard-Objekt zurück und alle Vorgänge werden über dieses Objekt ausgeführt.

const clipboardObj = navigator.zwischenspeichern;

Wenn die Eigenschaft navigator.clipboard „undefined“ zurückgibt, bedeutet dies, dass der aktuelle Browser diese API nicht unterstützt.

Da Benutzer vertrauliche Daten (z. B. Passwörter) in die Zwischenablage legen können, birgt das willkürliche Lesen dieser Daten durch Skripte Sicherheitsrisiken. Daher unterliegt diese API zahlreichen Sicherheitsbeschränkungen.

Zunächst einmal legt der Chrome-Browser fest, dass nur Seiten, die das HTTPS-Protokoll verwenden, diese API nutzen können. Die Entwicklungsumgebung (localhost) erlaubt jedoch die Verwendung unverschlüsselter Protokolle.

Zweitens muss beim Aufruf explizit die Erlaubnis des Nutzers eingeholt werden. Die spezifische Implementierung von Berechtigungen erfolgt über die Berechtigungs-API. Es gibt zwei Berechtigungen im Zusammenhang mit der Zwischenablage: clipboard-write (Schreibberechtigung) und clipboard-read (Leseberechtigung). „Schreibrechte“ werden dem Skript automatisch erteilt, „Leserechte“ müssen hingegen explizit vom Benutzer erteilt werden. Das heißt, das Schreiben in die Zwischenablage kann automatisch durch das Skript erfolgen, beim Lesen der Zwischenablage öffnet der Browser jedoch ein Dialogfeld, in dem der Benutzer gefragt wird, ob er dem Lesen zustimmt.

Darüber hinaus ist zu beachten, dass das Skript immer die Zwischenablage der aktuellen Seite liest. Dies bringt ein Problem mit sich, nämlich dass beim Einfügen des entsprechenden Codes in das Entwicklertool und bei der direkten Ausführung möglicherweise eine Fehlermeldung angezeigt wird, weil die aktuelle Seite zu diesem Zeitpunkt das Fenster des Entwicklertools und nicht die Webseite ist.

(asynchron () => {
  const text = warte auf navigator.clipboard.readText();
  konsole.log(text);
})();

Wenn Sie den obigen Code in das Entwicklertool einfügen und ausführen, wird eine Fehlermeldung angezeigt. Denn wenn der Code ausgeführt wird, ist das Fenster mit den Entwicklertools die aktuelle Seite und diese Seite verfügt nicht über die DOM-Schnittstelle, von der die Clipboard-API abhängt. Eine Lösung besteht darin, den entsprechenden Code in setTimeout() einzufügen, um die Ausführung zu verzögern, und vor dem Aufruf der Funktion schnell auf das Seitenfenster des Browsers zu klicken, um es zur aktuellen Seite zu machen.

setTimeout(async () => {
  const text = warte auf navigator.clipboard.readText();
  konsole.log(text);
}, 2000);

Nachdem Sie den obigen Code in das Entwicklertool eingefügt und ausgeführt haben, klicken Sie schnell auf das Seitenfenster der Webseite, um es zur aktuellen Seite zu machen, damit kein Fehler gemeldet wird.

3. Zwischenablageobjekt

Das Clipboard-Objekt bietet vier Methoden zum Lesen und Schreiben aus der Zwischenablage. Sie sind alle asynchrone Methoden, die Promise-Objekte zurückgeben.

3.1 Clipboard.readText()

Die Methode Clipboard.readText() wird verwendet, um die Textdaten in die Zwischenablage zu kopieren.

Dokument.body.addEventListener(
  'klicken',
  asynchron (e) => {
    const text = warte auf navigator.clipboard.readText();
    konsole.log(text);
  }
)

Im obigen Beispiel wird der Text in der Zwischenablage ausgegeben, wenn der Benutzer auf die Seite klickt. Beachten Sie, dass der Browser zu diesem Zeitpunkt ein Dialogfeld öffnet, in dem der Benutzer gefragt wird, ob er dem Skript das Lesen der Zwischenablage gestattet.

Wenn der Benutzer nicht einverstanden ist, meldet das Skript einen Fehler. Zu diesem Zeitpunkt können Sie zur Fehlerbehandlung die Try...Catch-Struktur verwenden.

asynchrone Funktion getClipboardContents() {
  versuchen {
    const text = warte auf navigator.clipboard.readText();
    console.log('Eingefügter Inhalt: ', Text);
  } fangen (Fehler) {
    console.error('Inhalt der Zwischenablage konnte nicht gelesen werden: ', err);
  }
}

3.2 Zwischenablage.lesen()

Mit der Methode Clipboard.read() werden die Daten in der Zwischenablage kopiert. Dabei kann es sich um Textdaten oder Binärdaten (z. B. Bilder) handeln. Diese Methode erfordert die ausdrückliche Erlaubnis des Benutzers.

Diese Methode gibt ein Promise-Objekt zurück. Sobald der Status des Objekts aufgelöst ist, können Sie ein Array abrufen. Jedes Array-Mitglied ist eine Instanz des ClipboardItem-Objekts.

asynchrone Funktion getClipboardContents() {
  versuchen {
    const clipboardItems = warte auf navigator.clipboard.read();
    für (const clipboardItem von clipboardItems) {
      für (const Typ von clipboardItem.types) {
        const blob = warte auf clipboardItem.getType(Typ);
        Konsole.log(URL.createObjectURL(blob));
      }
    }
  } fangen (Fehler) {
    Konsole.Fehler(Fehlername, Fehlernachricht);
  }
}

Das ClipboardItem-Objekt stellt ein einzelnes Clipping-Element dar. Jedes Clipping-Element hat eine ClipboardItem.types-Eigenschaft und eine ClipboardItem.getType()-Methode.

Die Eigenschaft ClipboardItem.types gibt ein Array zurück, dessen Mitglieder die verfügbaren MIME-Typen für das Zwischenablageelement sind. Wenn ein Zwischenablageelement beispielsweise im HTML-Format oder im Nur-Text-Format eingefügt werden kann, verfügt es über zwei MIME-Typen (text/html und text/plain).

Die Methode ClipboardItem.getType(type) wird zum Lesen der Daten des Zwischenablageelements verwendet und gibt ein Promise-Objekt zurück. Diese Methode akzeptiert den MIME-Typ des Clip-Elements als Parameter und gibt Daten dieses Typs zurück. Dieser Parameter ist erforderlich, da sonst ein Fehler gemeldet wird.

3.3 Clipboard.writeText()

Die Methode Clipboard.writeText() wird verwendet, um Textinhalte in die Zwischenablage zu schreiben.

Dokument.body.addEventListener(
  'klicken',
  asynchron (e) => {
    warte auf navigator.clipboard.writeText('Yo')
  }
)

Das obige Beispiel zeigt, dass das Skript Textdaten in die Zwischenablage schreibt, nachdem der Benutzer auf eine Webseite geklickt hat.

Diese Methode erfordert keine Benutzerberechtigung, aber es ist am besten, sie in ein Try...Catch einzufügen, um Fehler zu vermeiden.

asynchrone Funktion copyPageUrl() {
  versuchen {
    warte auf navigator.clipboard.writeText(location.href);
    console.log('Seiten-URL in die Zwischenablage kopiert');
  } fangen (Fehler) {
    console.error('Kopieren fehlgeschlagen: ', err);
  }
}

3.4 Zwischenablage.schreiben()

Mit der Methode Clipboard.write() können beliebige Daten in die Zwischenablage geschrieben werden. Dabei kann es sich um Textdaten oder Binärdaten handeln.

Diese Methode akzeptiert als Parameter eine ClipboardItem-Instanz, die die in die Zwischenablage zu schreibenden Daten darstellt.

versuchen {
  const imgURL = "https://dummyimage.com/300.png";
  const data = warte auf Abruf (imgURL);
  const blob = warte auf Daten.blob();
  warte auf navigator.clipboard.write([
    neues ClipboardItem({
      [Blob.Typ]: Blob
    })
  ]);
  console.log('Bild kopiert.');
} fangen (Fehler) {
  Konsole.Fehler(Fehlername, Fehlernachricht);
}

Im obigen Beispiel schreibt das Skript ein Bild in die Zwischenablage. Beachten Sie, dass Chrome derzeit nur das Schreiben von Bildern im PNG-Format unterstützt.

ClipboardItem() ist ein Konstruktor, der vom Browser nativ bereitgestellt wird und zum Generieren einer ClipboardItem-Instanz verwendet wird. Er akzeptiert ein Objekt als Parameter. Der Schlüsselname des Objekts ist der MIME-Typ der Daten und der Schlüsselwert sind die Daten selbst.

Das folgende Beispiel schreibt Werte desselben Clip-Elements in mehreren Formaten in die Zwischenablage. Eines davon sind Textdaten und das andere sind Binärdaten, die bei verschiedenen Gelegenheiten eingefügt werden können.

Funktion kopieren() {
  const image = warte auf Abruf('kätzchen.png');
  const text = new Blob(['Süßes schlafendes Kätzchen'], {type: 'text/plain'});
  const item = neues ClipboardItem({
    'text/plain': Text,
    'image/png': Bild
  });
  warte auf navigator.clipboard.write([item]);
}

4. Ereignis kopieren, Ereignis ausschneiden

Wenn der Benutzer Daten in die Zwischenablage einfügt, wird das Kopierereignis ausgelöst.

Das folgende Beispiel konvertiert den Text, den der Benutzer in die Zwischenablage einfügt, in Großbuchstaben.

const Quelle = document.querySelector('.source');

source.addEventListener('kopieren', (Ereignis) => {
  const Auswahl = Dokument.getSelection();
  event.clipboardData.setData('text/plain', selection.toString().toUpperCase());
  event.preventDefault();
});

Im obigen Beispiel enthält die Eigenschaft clipboardData des Ereignisobjekts die Daten der Zwischenablage. Es ist ein Objekt mit den folgenden Eigenschaften und Methoden.

• Event.clipboardData.setData(Typ, Daten): Ändert die Daten in der Zwischenablage. Sie müssen den Datentyp angeben.
• Event.clipboardData.getData(Typ): Zwischenablagedaten abrufen. Sie müssen den Datentyp angeben.
• Event.clipboardData.clearData([Typ]): Löscht die Daten aus der Zwischenablage. Sie können den Datentyp angeben. Wenn Sie keinen Typ angeben, werden Daten aller Typen gelöscht.
• Event.clipboardData.items: Ein arrayähnliches Objekt, das alle Zwischenablageelemente enthält, normalerweise aber nur ein Zwischenablageelement.

Das folgende Beispiel fängt den Kopiervorgang des Benutzers ab und legt den angegebenen Inhalt in die Zwischenablage.

const ZwischenablageItems = [];

document.addEventListener('kopieren', async (e) => {
  e.preventDefault();
  versuchen {
    : Lassen Sie clipboardItems = [];
    für (const item of e.clipboardData.items) {
      wenn (!item.type.startsWith('image/')) {
        weitermachen;
      }
      ZwischenablageItems.push(
        neues ClipboardItem({
          [Artikeltyp]: Artikel,
        })
      );
      warte auf navigator.clipboard.write(clipboardItems);
      console.log('Bild kopiert.');
    }
  } fangen (Fehler) {
    Konsole.Fehler(Fehlername, Fehlernachricht);
  }
});

Im obigen Beispiel wird mit e.preventDefault() die Standardoperation der Zwischenablage abgebrochen, anschließend übernimmt das Skript den Kopiervorgang.

Das Ausschneideereignis wird ausgelöst, wenn der Benutzer einen Ausschneidevorgang ausführt. Seine Verarbeitung ist genau die gleiche wie beim Kopierereignis, und die Ausschneidedaten werden aus der Eigenschaft Event.clipboardData abgerufen.

5. Ereignis einfügen

Wenn der Benutzer die Zwischenablagedaten zum Einfügen verwendet, wird das Einfügeereignis ausgelöst.

Das folgende Beispiel fängt den Einfügevorgang ab und verwendet das Skript, um die Daten aus der Zwischenablage abzurufen.

document.addEventListener('einfügen', async (e) => {
  e.preventDefault();
  const text = warte auf navigator.clipboard.readText();
  console.log('Eingefügter Text: ', Text);
});

Oben finden Sie Einzelheiten dazu, wie JS die Clipboard-API verwendet, um die Zwischenablage zu betreiben. Weitere Informationen dazu, wie JS die Zwischenablage verwendet, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!