Comment puis-je copier efficacement du texte dans le presse-papiers à l'aide de JavaScript ?

Comment copier dans le presse-papiers en JavaScript

En JavaScript, il existe plusieurs façons de copier du texte dans le presse-papiers, selon la prise en charge du navigateur.

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

Disponible dans Chrome 66, l'API Async Clipboard offre un accès asynchrone au presse-papiers. Il utilise les promesses JavaScript, permettant une exécution transparente sans que les invites de l'utilisateur n'interrompent la page. De plus, le texte peut être directement copié dans le presse-papiers à partir d'une variable. Notez que cela ne fonctionne que sur les pages servies via HTTPS.

2. document.execCommand('copy') (Obsolète)

Cette méthode est synchrone et prise en charge par la plupart des navigateurs depuis avril 2015. Elle arrête l'exécution de JavaScript jusqu'à ce que le processus soit terminé, affichant potentiellement des invites de sécurité à l'utilisateur . Le texte est copié du DOM vers le presse-papiers.

Notes générales de développement :

• Les commandes du presse-papiers peuvent ne pas fonctionner lors du test du code dans la console.
• Les pages doivent être actives (pour l'API Async Clipboard) ou nécessiter une interaction de l'utilisateur (pour document.execCommand('copy')) pour accéder au clipboard.

Méthode de secours :

Pour garantir la compatibilité entre navigateurs, il est recommandé d'utiliser une méthode de secours parallèlement à l'API Async Clipboard. Voici un exemple :

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

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!