Ajouter un bouton "cliquer pour copier" avec JavaScript

Vous aimeriez permettre à vos utilisateurs de copier rapidement et très facilement du texte sur votre projet ? Ce fameux lien pour partager votre article ? Ce lien d'affiliation qui vous permet de générer des ventes supplémentaires ? Alors cet article est fait pour vous ! Voyons ensemble les deux méthodes principales qui vont permettre d'ajouter un bouton "cliquer pour copier" avec l'aide de JavaScript.

Commençons par un exemple

Pour découvrir comment nous allons faire, nous vous proposons de commencer par un petit exemple.

Il s'agit d'un textarea qui contient du texte par défaut, mais vous pouvez aussi utiliser un input. Nous ajouterons également un bouton, qui permet de montrer à nos utilisateurs qu'ils peuvent copier le contenu rapidement.

<div class="wrapper">
  <textarea rows="10">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</textarea>
  <button>Copier</button>
</div>

textarea {
  width: 100%;
  padding: 20px;
  font-size: 15px;
  outline: none;
  border: 1px solid #613bdb;
  border-radius: 10px;
  background: #c1c9df;
}

button {
  height: 45px;
  width: 155px;
  color: #fff;
  background: #613bdb;
  border: none;
  border-radius: 5px;
  font-weight: 400;
  margin-top: 8px;
  cursor: pointer;
}

Notez que nous n'utilisons pas de classes (.classe) ou d'identifiants (#identifiant), car nous disposons seulement de deux éléments.

Premier objectif : détecter le clic

Afin que nous puissions copier notre texte, il faut d'abord pouvoir comprendre lorsque notre utilisateur clique sur le bouton "Copier".

Pour ce faire, nous commençons par récupérer notre textarea (ou notre input) avec un document.querySelector et nous faisons la même chose pour le bouton.

let editor = document.querySelector("textarea");
let button = document.querySelector("button");

Maintenant que nos éléments sont ciblés, il suffit d'ajouter un événement sur le bouton pour détecter le clic.

button.addEventListener('click', () => {
  console.log('Je suis cliqué');
});

Bien ! Nous pouvons maintenant copier le contenu du textarea (ou de l'input) au clic sur le bouton.

Deuxième objectif : copier le texte

Pour réussir à copier le texte, nous avons deux méthodes que nous pouvons utiliser. La première consiste à passer par l'objet document et la seconde par navigator.

Commençons par l'objet document.

Méthode A

Ce que nous souhaitons, c'est à la fois :

1. Sélectionner le texte
2. Copier le texte
3. Modifier le texte du bouton (pour afficher un joli message de confirmation par exemple)

Voici ce que nous allons faire avec JavaScript.

button.addEventListener('click', () => {
  editor.select();
  button.innerText = "Copié !";
});

Avec select() et innerText nous pouvons sélectionner le contenu du texte et modifier le contenu du bouton. Toutefois, nous ne pouvons toujours pas copier le texte. Voici comment faire.

button.addEventListener('click', () => {
  editor.select();
  document.execCommand("copy");
  button.innerText = "Copié !";
});

Avec execCommand() nous pouvons utiliser n'importe quelle commande (copier, coller, couper, etc...). Ici, nous souhaitons copier.

Méthode B

Passons à la deuxième méthode. Celle-ci reprend le code que nous avons précédemment pour sélectionner le contenu et modifier le texte du bouton mais change la manière de copier le texte.

button.addEventListener('click', () => {
  editor.select();
  // document.execCommand("copy"); méthode numéro 1
  navigator.clipboard.writeText(editor.value); // méthode numéro 2
  button.innerText = "Copié !";
});

Avec l'objet navigator nous pouvons accéder au presse-papier et y écrire du texte. C'est pour récupérer le contenu du textarea (ou de l'input) que nous passons editor.value.

C'est aussi simple que ça ! Vous savez maintenant comment copier du texte très rapidement et très facilement. Si vous souhaitez en savoir plus sur le HTML et le CSS, nous avons une formation complète dédiée à ces deux langages de programmation. N'hésitez pas non plus à partager cet article à votre entourage sur vos réseaux-sociaux. Merci !