Salut les amis de l'Internet,

Je vais te montrer comment est-ce que l'on peut facilement ajouter une fonction de copier-coller en JS de manière très simple et réutilisable. Chauffe Marcel 🚀

Dans notre use case, on va se dire qu'on a une interface d'administration et que dans notre page il est possible d'afficher un API Token. Si celui-ci est long, on va pas se le farcir à recopier bêtement et je sais que toi, t'es pas bête, tu vas sans doute le surligner et faire CTRL + P. Mais nous on voudrait pouvoir faire un double clique dessus pour l'avoir dans notre presse-papier pour le coller quelque part.

On aurait donc quelque chose comme :

<label for="api-token">API Token</label>
<input id="api-token" type="text" value="740cf5271efcd12d7679008e17492541"/>
<small class="help">Double cliquez pour copier</small>

Ensuite on ajoute en JS un évènement sur notre input :

const $apiToken = document.getElementById("api-token");
$apiToken.addEventListener("dblclick", (e) => copyToClipboard(e.currentTarget.value));

Note : j'utilise l'eventdblclickau lieu du simpleclickpour rendre l'action plus volontaire de la part de l'utilisateur.

Pour écrire notre fonction copyToClipboard(), on va se servir de l'objet Navigator, il permet, entre autre, d'avoir des informations sur le navigateur. Partant de là, on peut donc utiliser l'API Clipboard. Tu peux y jeter un oeil si tu ouvres ta console et que tu tapes : navigator.clipboard.

Tu remarqueras qu'on a plusieurs méthodes :

• read()
• readText()
• write()
• writeText()

Nous, on va utiliser writeText() comme ceci :

const copyToClipboard = async (value) => {
    try {
        await navigator.clipboard.writeText(value);
    } catch (error) {
        console.error(error.message);
    }
};

Hé oui ! writeText() retourne une promesse ! C'est pourquoi j'utilise async/await. Et pour avoir un code plus sécure, on wrap tout ça dans un try/catch.

Un double-clique sur le champ contenant notre API token et tu n'as plus qu'à coller là où tu en as besoin 🙌