Wie kopiere ich Text in JavaScript in allen Browsern in die Zwischenablage?

So kopieren Sie in JavaScript in die Zwischenablage (browserübergreifend)

Übersicht

An Wenn Sie Text in die Zwischenablage kopieren möchten, können Sie drei primäre Browser verwenden APIs:

1. Async Clipboard API (navigator.clipboard.writeText)
2. document.execCommand('copy') (veraltet)
3. Überschreiben der Kopie Ereignis

Allgemeine Entwicklungsüberlegungen

• Deaktivieren Sie die Zwischenablagefunktion beim Testen von Code in der Konsole.
• Seiten müssen vorhanden sein aktiv (Async Clipboard API) oder erfordern Benutzerinteraktion (document.execCommand('copy')), um auf die zuzugreifen Zwischenablage.

Implementierung

Async Fallback

Für die beste Browserabdeckung kombinieren Sie die Async Clipboard API mit ein Rückfall auf document.execCommand('copy'):

copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(function() {
    console.log('Async: Copying to clipboard was successful!');
  }, function(err) {
    console.error('Async: Could not copy text: ', err);
  });
}

Clipboard API-Vergleich

Kein direkter Zusammenhang mit der Frage

API

Funktionen

Unterstützung

API	Features	Support
Async Clipboard API	Text-focused, asynchronous, supports HTTPS	Chrome 66 (March 2018), works in inactive tabs
document.execCommand('copy')	Synchronous, reads text from DOM	Most browsers (as of April 2015), displays permission prompts
Overriding the Copy Event	Can modify clipboard content from any copy event, supports various data formats	Not directly related to the question

Async Clipboard API

Textfokussiert, asynchron, unterstützt HTTPS

Chrome 66 (März 2018), funktioniert in inaktiven Tabs

document.execCommand('copy')

Synchron, liest Text aus dem DOM

Die meisten Browser (Stand April 2015) zeigen die Berechtigung an Eingabeaufforderungen

Überschreiben des Kopierereignisses

Kann den Inhalt der Zwischenablage von jedem Kopierereignis ändern, unterstützt verschiedene Datenformate

Hinweis (20.02.2020)Veraltete Berechtigungen verhindern, dass Codefragmente in einigen Browsern funktionieren. Verwenden Sie zum Testen und Entwickeln eine aktive Webseite, die über HTTPS bereitgestellt wird.

Das obige ist der detaillierte Inhalt vonWie kopiere ich Text in JavaScript in allen Browsern in die Zwischenablage?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!