Comment interagir avec le presse-papier avec JavaScript

Interagir avec le presse-papier a longtemps été la bête noire des développeurs d'applications web. Souvent lourd à l'usage, il fallait même un temps passer par un module en Flash ! Cette période est révolue et on peut désormais copier du texte en JavaScript très aisément.

Le moins que l'on puisse dire, c'est que copier du texte en JavaScript a fait parler les petits curieux, tu peux le constater par toi-même sur cette discussion StackOverflow… La plupart des conclusions y sont un peu datées, mais elles ont le mérite de rendre compte de la difficulté qu'a pu être cette question par le passé.

Si ton patron te force à supporter des versions obsolètes des navigateurs, tu ne va pas avoir le choix que d'utiliser cette technique d'un autre temps. En réalité, je te la met pour en garder une trace, mais tu ne devrais pas l'utiliser (c'est mon petit côté archéologue) :

var $button = document.querySelector('#button')
$button.addEventListener('click', function() {

    // Création d'un input temporaire
    var temporaryInput = document.createElement("input");

    // Un petit trick pour "cacher" l'input
    // tout en faisant croire au navigateur qu'il est visible
    tempInput.style = "position:absolute; left: -100%; top: -100%";
    tempInput.value = value;

    // Copie de la valeur de l'input
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand("copy");

    // On nettoie derrière nous
    document.body.removeChild(tempInput);
})

Comme tu peux le voir, on est plus dans le hack un peu crado que dans une véritable démarche qualité. Tu noteras que je te l'ai mis en ES5, car si tu t'en sers, il y a de grandes chances que ton navigateur ne supporte pas la syntaxe ESNext.

Edit : Cette méthode est dépréciée et cause désormais des soucis dans les navigateurs récents. Il convient de la remplacer par une des deux méthodes qui suivent.

La véritable solution, celle à retenir se fait via l'API Clipboard de JavaScript.

Son usage a le mérite d'être très simple et explicite :

const $button = document.querySelector('#button')
$button.addEventListener('click', () => {
    const textToCopy = 'hello-world';
    navigator.clipboard.writeText(textToCopy)
})

Attention toutefois, ton appel à navigator.clipboard.writetext() doit être déclenché suite à une action de l'utilisateur (ici un clic sur un bouton).

C'est pour cette raison que tu ne peux pas juste copier la ligne dans la console de ton navigateur pour tester le fonctionnement. Il s'agit là d'une sécurité induite par les navigateurs, je te laisse imaginer les cochonneries que certains seraient tentés de faire avec sinon.

Il se peut que tu ais un besoin un petit peu plus complexe et que l'API Clipboard soit un peu légère pour remplir cette tâche :

Dans ce cas, je ne peux que te conseiller d'utiliser la librairie JavaScript Copy To Clipboard qui va te permettre de greffer des événements à la copie, définir le type MIME du texte copié et qui va gérer pour toi la méthode de copie la plus appropriée selon le navigateur (il peut même basculer sur execCommand si besoin).

document.addEventListener('paste', (e) => {
    // Contient la valeur copiée
    const pastedData = e.clipboardData.getData('Text')
})

Tu souhaites modifier une valeur au moment du collage de ta valeur ? Malheureusement, il ne va pas être possible de modifier directement cette valeur pour la renvoyer au process principal. Nous allons devoir laisser la valeur être collée et capturer l'événement pour déclencher les modifications attendues.

Certaines librairies JS gèrent cette subtilité mais ne sont pas vouées à être employées dans un navigateur web mais plutôt dans une application de type Electron. On s'éloigne donc de notre problématique.