Comment copier efficacement du texte dans le presse-papiers sur plusieurs navigateurs en JavaScript ?

Copier du texte dans le presse-papiers en JavaScript pour plusieurs navigateurs

Présentation : quelle API utiliser ?

Pour copier du texte dans le presse-papiers, JavaScript fournit trois API principales du navigateur :

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

  • Disponible dans Chrome 66
  • Asynchrone et utilise des promesses
  • Peut être écrit pour éviter d'interrompre les invites de l'utilisateur
  • Supporté uniquement sur HTTPS pages

• document.execCommand('copy'):

  • Largement pris en charge dans tous les navigateurs
  • Exécution synchrone et interrompue de la page jusqu'à ce qu'elle soit terminée
  • Lit le texte du DOM et le place sur le presse-papiers

• Remplacement de l'événement de copie :

  • Autorise la modification du contenu du presse-papiers pour tout événement de copie
  • Prend en charge plusieurs formats de données, au-delà du texte brut
  • Non directement adressé ici

Notes générales de développement

• Les commandes du presse-papiers peuvent ne pas fonctionner lors du test du code dans la console.
• Pages actives (pour API Async Clipboard) ou l'interaction de l'utilisateur (pour document.execCommand('copy')) est souvent requis.

Approche de secours asynchrone

En raison de la prise en charge variable des navigateurs, il est conseillé d'utiliser une méthode de secours. Par exemple :

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

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

Démo et conclusion

Pour tester le code et le voir en action, visitez cette page de démonstration. Notez que les exemples intégrés peuvent ne pas fonctionner en raison de problèmes d'autorisations dans les IFRAME.

Pour une compatibilité totale entre navigateurs, utilisez l'API Async Clipboard lorsqu'elle est prise en charge et revenez à document.execCommand('copy') dans le cas contraire.

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!