Copie dans le presse-papiers en JavaScript : 3 méthodes fonctionnelles

Trois méthodes pour copier du texte dans le presse-papiers en JavaScript : des anciennes aux modernes

Vous êtes-vous déjà demandé comment fonctionne la magie du bouton "Copier" ? Vous cliquez — et le lien, le code ou le code promo est déjà dans le presse-papiers. Sans flash, sans défilement, sans gestes superflus. Cette tâche, apparemment simple, est l'une des questions les plus populaires sur Stack Overflow. Et pour cause : l'implémentation de la copie dans le presse-papiers en JavaScript cache des pièges, des différences entre navigateurs et trois époques entières de développement web.

Dans cet article, nous allons passer en revue toutes les méthodes de copie de texte dans le presse-papiers avec JavaScript : du bon vieux (et presque mort) document.execCommand au moderne et asynchrone navigator.clipboard. Vous apprendrez non seulement comment copier du texte, mais aussi comment le faire de manière sécurisée, élégante et avec le support des anciens navigateurs. C'est parti !

Pourquoi la copie dans le presse-papiers n'est pas "simple"

À première vue, on se dit : qu'est-ce qu'il y a de si compliqué ? On prend le texte, on l'envoie dans le presse-papiers. Mais les navigateurs sont paranoïaques. Ils ne veulent pas qu'un script quelconque sur un site puisse lire ou écrire dans le presse-papiers à votre insu. Imaginez : vous ouvrez un site, et en arrière-plan, il remplace le mot de passe copié par "EnvoieMoiDesBitcoins". Horrible, non ?

C'est pourquoi JavaScript a des règles strictes : la copie n'est possible que lors d'une action active de l'utilisateur (clic, pression de touche). Et même avec cette condition — toutes les API ne fonctionnent pas de la même manière. Commençons.

Méthode n°1 : La classique — document.execCommand('copy')

Comment ça fonctionne

Autrefois, à l'époque des dinosaures (environ avant 2020), la seule façon de copier du texte dans le presse-papiers était l'astuce avec execCommand. L'idée est simple :

\n
• Créer un textarea ou un input temporaire.
\n
• Y placer le texte souhaité.
\n
• Le sélectionner (via select()).
\n
• Appeler document.execCommand('copy').
\n
• Supprimer l'élément temporaire.
\n

Voici à quoi cela ressemble en code :

function copyToClipboardLegacy(text) {\n    // Créer un élément temporaire\n    const textarea = document.createElement('textarea');\n    textarea.value = text;\n    // Le rendre invisible\n    textarea.style.position = 'fixed';\n    textarea.style.opacity = '0';\n    document.body.appendChild(textarea);\n    // Sélectionner le texte\n    textarea.select();\n    textarea.setSelectionRange(0, 99999); // Pour les appareils mobiles\n    // Copier\n    try {\n        const successful = document.execCommand('copy');\n        if (successful) {\n            console.log('Texte copié !');\n        } else {\n            console.error('La copie a échoué');\n        }\n    } catch (err) {\n        console.error('Erreur de copie :', err);\n    }\n    // Nettoyer\n    document.body.removeChild(textarea);\n}

Avantages et inconvénients

Avantages : fonctionne même dans Internet Explorer 9. Ne nécessite pas d'autorisations.

Inconvénients : considéré comme obsolète (deprecated). Synchrone — bloque le thread principal pendant la copie. Peu pratique pour copier de gros volumes de données. Et surtout, dans les navigateurs modernes, il peut être supprimé à tout moment.

Conseil : si vous écrivez un nouveau projet — n'utilisez pas execCommand. Mais pour le support des navigateurs très anciens (IE11, ancien Edge), c'est la seule option.

Méthode n°2 : La moderne — Clipboard API (navigator.clipboard)

Comment ça fonctionne

Les béquilles ont été remplacées par le Clipboard API — asynchrone, sécurisé et flexible. Il vit dans l'objet navigator.clipboard et peut non seulement écrire, mais aussi lire le presse-papiers (avec l'autorisation de l'utilisateur).

Pour copier, on utilise la méthode writeText() :

async function copyToClipboardModern(text) {\n    try {\n        await navigator.clipboard.writeText(text);\n        console