En tant que développeur, nous savons à quel point il est utile et bon d'avoir un bouton "copier" à côté d'un bloc de code. Dans certains cas, cela aide les utilisateurs et augmente la convivialité de notre site Web.

Dans cet article, nous allons rendre le texte copiable dans le presse-papiers avec seulement quelques lignes de JavaScript.

Le balisage

Pour rendre cet article rapide et facile à digérer, j'utiliserai Tailwind CSS pour styliser l'application et le rendre agréable à regrder.

Pour la partie HTML, ce sera très simple (à l'exception des classes ajoutées par Tailwind CSS).

<main class="flex flex-col h-screen justify-center items-center bg-gray-100">
  <div class="bg-white max-w-sm p-5 rounded shadow-md mb-3">
    <input
      class="border-blue-500 border-solid border rounded py-2 px-4"
      type="text"
      placeholder="Enter some text"
      id="copyMe"
    />
    <button
      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded"
      onclick="copyMeOnClipboard()"
    >
      Copy
    </button>
  </div>
  <p class="text-green-700"></p>
</main>

Dans ce bloc de code, il y a 3 choses importantes à retenir:

• L'id de la balise input copyMe
• La fonction copyMeOnClipboard() de la balise button
• La balise p

L'identifiant copyMe nous aidera à accéder à la valeur contenue dans input. Et quand l'utilisateur cliquera sur le bouton Copy, il appellera la fonction copyMeOnClipboard(). Et Enfin, nous afficherons dynamiquement un message de réussite à l'utilisateur via JavaScript.

Cela étant dit, nous pouvons maintenant passer au fichier JS et apporter la touche finale.

JavaScript est génial

JavaScript

Bien sûr, JavaScript est cool, et il a des méthodes très pratiques.

const copyText = document.querySelector("#copyMe")
const showText = document.querySelector("p")

const copyMeOnClipboard = () => {
  copyText.select()
  copyText.setSelectionRange(0, 99999) // used for mobile phone
  document.execCommand("copy")
  showText.innerHTML = `${copyText.value} is copied`
  setTimeout(() => {
    showText.innerHTML = ""
  }, 1000)
}

Comme vous pouvez le voir ici, nous commençons par sélectionner nos éléments nécessaires copyText et showText. Il s'agit respectivement des balises input et paragraphe. Ensuite, nous utilisons la fonction copyMeOnClipboard() pour gérer la logique.

L'élément copyText (rappelez-vous, c'est la balise input) nous donne accès à la méthode select() et comme vous pouvez le deviner, il sélectionne le contenu du champ de texte entré par l'utilisateur.

Et enfin, nous pouvons exécuter la commande de copie avec document.execCommand("copy") et obtenir en retour le texte dans le presse-papiers.

C'est trop facile

Nous avons presque terminé, mais nous pouvons encore l'améliorer un peu en montrant à l'utilisateur un message de réussite. C'est assez simple car nous avons déjà accès à l'élément showText. La seule chose que nous devons faire est d'ajouter le message avec innerHTML et de le supprimer après 1 seconde avec setTimeout ().

Et C'est tout!

Merci de l'avoir lu.

Vous pouvez le voir ici