Ce billet résume les éléments clés qui permettent d'utiliser le plugin "clipboard" dans une page pour permettre le "copier-coller" d'un contenu de la page web pars le presse-papier de l'utilisateur.
information complémentaireNB : laisser votre pointeur de souris sur les textes  précédés de l'ampoule et de couleur rouge pour obtenir une information complémentaire.

La page à réaliser est décrite en 3 fichiers :

  • index.html pour le code html de la page
  • index.js pour le javascript (interaction utilisateur)
  • clipboard.css pour l'aspect visuel
     

Les fichiers

Le code HTML

Dans l'entête, on retrouve les appels aux bibliothèques jQuery, jQuery-ui et clipboard téléchargés sur le CDN "cdnjs" et le lien vers notre script index.js

Le corps du code situé entre les balise <main> et </main> se découpe en 2 parties :

  1. une zone de "titre" de classe "example" qui contient le texte du "titre" information complémentaire disponible(identifié "dh")  et le bouton "Copy to Clipboard .."

Notez que le texte "Copy to Clipboard" peut être remplacé par une image (cf  : <!--img id="btn" class="clippy" src="../images/clippy.svg" width="13" alt="Copy to clipboard"--> à dé-commenter)

  1. une zone identifiée "foo" contenant le texte proposé à la copie entre les balise <pre></pre>

Le script

Par $(function(){....}), on applique le jQuery sur le DOM de la page. puis on crée une instance de l'objet ClipboardJS sur l'élément bouton identifié par sa classe '.btn' avec le code  clipboard = new ClipboardJS('.btn').

Enfin grâce à la méthode on de l'objet clipboard, on réagit aux réponses "success"ou "error" rendue par le plugin lors d'un appui sur le bouton.

Ici, en cas de succès ( le code est copié dans le presse-papier), on informe l'utilisateur par 2 actions :

  • information complémentaire disponible$("#dh").html('...') remplace le texte du titre grâce à  jQuery et l'identification id=dh de l'élément;
  • $(".btn").html('copied') remplace le texte du bouton par "copied", merci encore jQuery.