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

So kopieren Sie Text in die Zwischenablage in JavaScript

In JavaScript gibt es je nach Browserunterstützung mehrere Möglichkeiten, Text in die Zwischenablage zu kopieren.

1. Async Clipboard API [navigator.clipboard.writeText]

Die Async Clipboard API ist in Chrome 66 verfügbar und bietet asynchronen Zugriff auf die Zwischenablage. Es verwendet JavaScript-Versprechungen und ermöglicht so eine nahtlose Ausführung, ohne dass Benutzereingaben die Seite unterbrechen. Darüber hinaus kann Text direkt aus einer Variablen in die Zwischenablage kopiert werden. Beachten Sie, dass es nur auf Seiten funktioniert, die über HTTPS bereitgestellt werden.

2. document.execCommand('copy') (veraltet)

Diese Methode ist synchron und wird seit April 2015 von den meisten Browsern unterstützt. Sie stoppt die JavaScript-Ausführung, bis der Prozess abgeschlossen ist, und zeigt dem Benutzer möglicherweise Sicherheitshinweise an . Text wird aus dem DOM in die Zwischenablage kopiert.

Allgemeine Entwicklungshinweise:

• Zwischenablagebefehle funktionieren möglicherweise nicht, während Code in der Konsole getestet wird.
• Seiten müssen aktiv sein (für die Async Clipboard API) oder eine Benutzerinteraktion erfordern (für document.execCommand('copy')), um darauf zuzugreifen Zwischenablage.

Fallback-Methode:

Um die browserübergreifende Kompatibilität sicherzustellen, wird empfohlen, neben der Async Clipboard API eine Fallback-Methode zu verwenden. Hier ist ein Beispiel:

function fallbackCopyTextToClipboard(text) {
  // Create a textarea element and copy text to it
  const textArea = document.createElement("textarea");
  textArea.value = text;

  // Append the textarea to the body and set properties
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  // Execute the copy command
  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  // Remove the textarea from the body
  document.body.removeChild(textArea);
}

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 mit JavaScript effizient Text in die Zwischenablage kopieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!