Wie kann ich Text in JavaScript effizient in die Zwischenablage kopieren?

Kopieren in die Zwischenablage in JavaScript

Allgemeiner Überblick

Um Text in die Zwischenablage in JavaScript zu kopieren, gibt es drei Schlüssel-APIs:

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

   • Primäre API für Chrome 66 und höher (März 2018).
   • Asynchroner Zugriff mithilfe von JavaScript-Versprechungen, um eine reibungslose Benutzererfahrung zu gewährleisten.
   • Text kann direkt aus einer Variablen kopiert werden.
   • Erfordert HTTPS für den Zugriff Zwischenablage.

2. document.execCommand('copy'):

   • Veraltet, aber weithin unterstützt.
   • Synchroner Zugriff, die JavaScript-Ausführung wird angehalten, bis der Kopiervorgang abgeschlossen ist.
   • Text ist Aus dem DOM gelesen und in der Zwischenablage abgelegt.
   • Kann beim Testen in der Konsole Sicherheitsaufforderungen anzeigen.

3. Überschreiben des Kopierereignisses:

   • Ermöglicht die Änderung von Zwischenablagedaten aus jeder Kopie Ereignis.
   • Unterstützt mehrere Datenformate über einfachen Text hinaus.

Entwicklungsnotizen

• Zwischenablage- Verwandte Befehle funktionieren möglicherweise nicht in Konsolentests. Oft ist eine Seiteninteraktion oder ein aktiver Tab erforderlich.
• Aufgrund der Browser-Abwertung von Cross-Origin-Berechtigungen in IFRAMEs funktionieren eingebettete Demos möglicherweise nicht in Browsern wie Chrome und Microsoft Edge.

Async Plus Fallback

Kombination der Async Clipboard API mit einem Fallback auf document.execCommand('copy') gewährleistet umfassende Browserunterstützung:

function 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);
  });
}

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