Créer un bouton de copie pour les blocs de code

Si vous avez déjà observé quelqu’un peiner à sélectionner manuellement et copier un extrait de code — ou si vous l’avez vécu vous-même — vous savez déjà pourquoi un bouton de copie pour les blocs de code est important. C’est un petit détail d’interface utilisateur qui fait une vraie différence, en particulier pour les utilisateurs qui naviguent au clavier, par commandes vocales ou sur écrans tactiles.

Cet article vous guide dans la création d’une interface de copie d’extrait de code propre et fiable, en utilisant l’API Clipboard moderne — sans aucune bibliothèque requise.

Fonctionnement de la méthode writeText de l’API Clipboard

L’approche moderne pour copier dans le presse-papiers en JavaScript est navigator.clipboard.writeText(). Elle est basée sur les promesses, asynchrone et prise en charge par tous les navigateurs actuels.

Deux points à connaître avant de l’utiliser :

• Elle requiert un contexte sécurisé. L’API Clipboard ne fonctionne qu’en HTTPS. Sur localhost, le HTTP simple est également considéré comme sécurisé, ce qui convient parfaitement pour le développement.
• Elle doit être déclenchée par une action utilisateur. L’appeler à l’intérieur d’un gestionnaire d’événement click satisfait automatiquement cette exigence.

await navigator.clipboard.writeText("your text here");

C’est l’essentiel de la fonctionnalité.

Extraire le texte d’un bloc de code

Votre HTML ressemble probablement à ceci :

<pre><code>const greeting = "hello";</code></pre>

Pour récupérer le texte brut, utilisez textContent — et non innerHTML. Utiliser innerHTML copierait les balises HTML en même temps que le code, ce qui n’est jamais souhaité.

const code = document.querySelector("pre code").textContent;

Si vos blocs de code utilisent un coloriseur syntaxique comme Prism.js ou Highlight.js, celui-ci encapsule les jetons dans des éléments <span>. textContent élimine tout cela et ne renvoie que le texte brut, ce qui est exactement ce qui doit aboutir dans le presse-papiers de l’utilisateur.

Construire le bouton de copie pour les blocs de code

Voici une implémentation complète et fonctionnelle :

document.querySelectorAll("pre").forEach((block) => {
  const button = document.createElement("button");
  button.type = "button";
  button.textContent = "Copy";
  button.setAttribute("aria-label", "Copy code to clipboard");

  button.addEventListener("click", async () => {
    const code = block.querySelector("code")?.textContent ?? "";

    try {
      await navigator.clipboard.writeText(code);
      button.textContent = "Copied!";
      setTimeout(() => (button.textContent = "Copy"), 2000);
    } catch (err) {
      console.error("Copy failed:", err);
      button.textContent = "Failed";
      setTimeout(() => (button.textContent = "Copy"), 2000);
    }
  });

  block.style.position = "relative";
  block.appendChild(button);
});

Quelques points à noter ici :

• aria-label donne au bouton un nom accessible pour les lecteurs d’écran, ce qui est particulièrement important si vous remplacez ultérieurement le texte par une icône.
• e.currentTarget est plus sûr que e.target lorsque votre bouton contient des éléments enfants comme une icône SVG — e.target peut pointer vers l’icône elle-même plutôt que vers le bouton. (Vous pouvez y accéder en ajoutant le paramètre event au gestionnaire de clic si nécessaire.)
• Le bloc try/catch gère élégamment les refus de permission ou les défaillances inattendues, en offrant aux utilisateurs un retour visible plutôt qu’une erreur silencieuse.

Qu’en est-il des navigateurs plus anciens ?

navigator.clipboard bénéficie d’une excellente prise en charge sur tous les navigateurs modernes. Si vous devez prendre en charge des environnements plus anciens, document.execCommand('copy') existe comme solution de repli — mais elle est obsolète et peu fiable. Ne l’utilisez qu’en dernier recours, derrière une vérification de fonctionnalité :

if (!navigator.clipboard) {
  // legacy fallback using document.execCommand('copy')
}

Pour la plupart des sites de documentation et des outils de développement créés aujourd’hui, vous pouvez vous appuyer en toute confiance sur l’API Clipboard seule.

Conclusion

Un bouton de copie fonctionnel pour les blocs de code se résume à trois choses : récupérer le texte avec textContent, l’écrire avec navigator.clipboard.writeText(), et fournir à l’utilisateur un retour clair en cas de succès ou d’échec. Rendez le bouton accessible grâce à un aria-label, gérez les erreurs explicitement, et vous obtiendrez une implémentation prête pour la production en moins de 30 lignes de JavaScript pur.

FAQ

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.