Comment copier du texte dans le presse-papiers en JavaScript sur tous les navigateurs ?

Comment copier dans le presse-papiers en JavaScript (sur tous les navigateurs)

Aperçu

À copiez le texte dans le presse-papiers, vous pouvez utiliser trois navigateurs principaux API :

1. API Async Clipboard (navigator.clipboard.writeText)
2. document.execCommand('copy') (obsolète)
3. Remplacement de la copie Événement

Considérations générales sur le développement

• Désactivez la fonctionnalité du presse-papiers lors du test du code dans la console.
• Les pages doivent être actif (API Async Clipboard) ou nécessite une interaction de l'utilisateur (document.execCommand('copy')) pour accéder au clipboard.

Implémentation

Async Fallback

Pour une meilleure couverture du navigateur, combinez l'API Async Clipboard avec un repli vers 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);
  });
}

Comparaison de l'API du Presse-papiers

API

Fonctionnalités

Support

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

Presse-papiers asynchrone API

Axée sur le texte, asynchrone, prend en charge HTTPS

Chrome 66 (mars 2018), fonctionne dans les onglets inactifs

document.execCommand('copy')

Synchrone, lit le texte du DOM

La plupart des navigateurs (comme d'avril 2015), affiche des invites d'autorisation

Remplacement de l'événement de copie

Peut modifier le contenu du presse-papiers à partir de n'importe quel événement de copie, prend en charge divers formats de données

Pas directement liés à la question

Remarque (20/02/2020)Les autorisations obsolètes empêchent les extraits de code de fonctionner dans certains navigateurs. Utilisez une page Web active diffusée via HTTPS pour les tests et le développement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!