Wie kann ich Text in JavaScript effizient über mehrere Browser hinweg in die Zwischenablage kopieren?

Kopieren von Text in die Zwischenablage in JavaScript für mehrere Browser

Übersicht: Welche API soll verwendet werden?

Um Text in die Zwischenablage zu kopieren, bietet JavaScript drei Hauptbrowser-APIs:

• Async Clipboard API (navigator.clipboard.writeText):

  • Verfügbar in Chrome 66
  • Asynchron und verwendet Promises
  • Kann geschrieben werden, um Benutzereingaben nicht zu unterbrechen
  • Wird nur auf HTTPS unterstützt Seiten

• document.execCommand('copy'):

  • Weitgehend browserübergreifend unterstützt
  • Synchron, Anhalten der Seitenausführung bis zum Abschluss
  • Liest Text aus dem DOM und platziert ihn in der Zwischenablage

• Überschreiben des Kopierereignisses:

  • Ermöglicht die Änderung des Inhalts der Zwischenablage für jedes Kopierereignis
  • Unterstützt mehrere Datenformate, die über reinen Text hinausgehen
  • Nicht direkt angesprochen hier

Allgemeine Entwicklungshinweise

• Zwischenablagebefehle funktionieren möglicherweise nicht, wenn Code in der Konsole getestet wird.
• Aktive Seiten (für Async Clipboard API) oder Benutzerinteraktion (für document.execCommand('copy')) ist häufig der Fall erforderlich.

Asynchroner Fallback-Ansatz

Aufgrund der unterschiedlichen Browserunterstützung ist es ratsam, eine Fallback-Methode zu verwenden. Zum Beispiel:

function fallbackCopyTextToClipboard(text) {
  // ...
}

function copyTextToClipboard(text) {
  if (!navigator.clipboard) fallbackCopyTextToClipboard(text);
  // ...
}

Demo und Fazit

Um den Code zu testen und ihn in Aktion zu sehen, besuchen Sie diese Demonstrationsseite. Beachten Sie, dass eingebettete Beispiele aufgrund von Berechtigungsproblemen in IFRAMEs möglicherweise nicht funktionieren.

Für vollständige browserübergreifende Kompatibilität verwenden Sie die Async Clipboard API, sofern unterstützt, und greifen Sie andernfalls auf document.execCommand('copy') zurück.

Das obige ist der detaillierte Inhalt vonWie kann ich Text in JavaScript effizient über mehrere Browser hinweg in die Zwischenablage kopieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!