Comment puis-je copier de manière fiable du texte dans le presse-papiers en JavaScript sur différents navigateurs ?

Copier dans le presse-papiers en JavaScript : une approche multi-navigateur

Copier du texte dans le presse-papiers implique de tirer parti de diverses API de navigateur. Cet article se concentre sur les trois méthodes principales :

1. API Async Clipboard : [navigator.clipboard.writeText]
Publiée dans Chrome 66, l'API Async Clipboard fournit un accès asynchrone au presse-papiers. Il utilise des promesses, garantissant que les invites de l'utilisateur n'interrompent pas l'exécution de JavaScript. Cette méthode nécessite HTTPS et prend en charge les onglets inactifs dans Chrome 66.

2. document.execCommand('copy') (Obsolète)
Disponible dans la plupart des navigateurs depuis 2015, cette méthode est synchrone, bloquant l'exécution de JavaScript. Il copie le texte du DOM et le place dans le presse-papiers. Certains navigateurs peuvent afficher des invites d'autorisation pendant le processus.

3. Remplacement de l'événement de copie
Cette technique avancée vous permet de modifier ce qui apparaît dans le presse-papiers en fonction des événements de copie. Ce problème n'est pas abordé ici car il ne traite pas directement de la copie dans le presse-papiers.

Notes générales de développement

• Les opérations du presse-papiers nécessitent généralement que la page soit active ou nécessite une interaction de l'utilisateur.
• Depuis février 2020, les IFRAME d'origine croisée et le sandboxing IFRAME peuvent empêcher l'exemple de code de fonctionner dans certains navigateurs.

Approche de secours asynchrone

Pour garantir la compatibilité entre navigateurs, envisagez d'utiliser une approche asynchrone qui revient à document.execCommand('copy ') pour les anciens navigateurs :

function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(() => {
    console.log('Async: Copying to clipboard was successful!');
  }, (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!