Comment puis-je copier efficacement du texte dans le presse-papiers en JavaScript ?

Copier dans le presse-papiers en JavaScript

Présentation générale

Pour copier du texte dans le presse-papiers en JavaScript, il existe trois API clés :

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

   • API principale pour Chrome 66 et versions ultérieures (mars 2018).
   • Accès asynchrone à l'aide de JavaScript Promises, garantissant une expérience utilisateur fluide.
   • Le texte peut être copié directement à partir d'une variable.
   • Nécessite HTTPS pour accéder au clipboard.

2. document.execCommand('copy'):

   • Obsolète mais largement pris en charge.
   • Accès synchrone, arrêt de l'exécution de JavaScript jusqu'à ce que la copie soit terminée.
   • Le texte est lu à partir du DOM et placé dans le presse-papiers.
   • Peut afficher des invites de sécurité pendant les tests dans la console.

3. Remplacement de l'événement de copie :

   • Permet la modification des données du presse-papiers à partir de n'importe quel événement de copie.
   • Prend en charge plusieurs données formats au-delà du texte brut.

Notes de développement

• Les commandes liées au Presse-papiers peuvent ne pas fonctionner dans les tests de la console. Une interaction avec une page ou un onglet actif est souvent requis.
• En raison de la dépréciation par le navigateur des autorisations d'origine croisée dans les IFRAME, les démos intégrées peuvent ne pas fonctionner dans les navigateurs comme Chrome et Microsoft Edge.

Async Plus Fallback

Combinaison de l'API Async Clipboard avec une solution de repli vers document.execCommand('copy') garantit une large prise en charge du navigateur :

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

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!