Création d'un système de "Copy to clipboard"

Qu’est-ce qu’un système de  « Copy to clipboard » ?

Cette fonctionnalité consiste à créer un bouton qui, au clic, va copier dans le presse-papier de l’utilisateur un  élément bien précis. Elle est souvent utilisée sur des sites qui contiennent par exemple des codes de promotion, des générateurs d’URLs ou tout autre information qu’il est important pour un utilisateur de copier dans son presse-papier dans le but de l’utiliser autre part sur votre site ou en dehors. 

En d’autres termes, un système de « copy to clipboard »  simplifie l’expérience de l’utilisateur :  il lui évite de perdre du temps à réécrire par lui-même une information ou à sélectionner des éléments un par un et donc aussi de faire des erreurs.

Mettre en place un « Copy to clipboard » avec Clipboard.js

Clipboard.js est une librairie Javascript qui permet d'implémenter dans votre site une fonctionnalité de « Copy to clipboard ». Nous aurions pu choisir de développer nous-même cette fonctionnalité, mais l’avantage de cette librairie est qu’elle est légère et très facile d’utilisation. Elle représente donc la solution idéale dans le cas de notre demande client.

Installation de la librairie Clipboard.js

Il y a plusieurs façon d’ajouter la librairie Clipboard.js à votre site, à vous de voir quelle est pour vous la meilleure en fonction de votre environnement de développement :

• Téléchargez un dossier zippé contenant tous les fichiers de la librairie, à placer à l’endroit que vous souhaitez dans votre projet et à appeler dans les fichiers où vous en aurez besoin.
• Appelez la librairie dans votre projet  depuis un CDN : https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers
• Utliisez NPM / Yarn pour télécharger la librairie en tant que dépendance de votre projet grâce aux commandes : 

        npm install cliboard —save ou yarn install clipboard
    

Utilisation de Clipboard.js

Maintenant que Clipboard.js est installé sur votre projet, vous aurez besoin de deux choses pour la faire fonctionner : 

• Cibler l’élément à copier dans le presse-papier (dans notre cas, une div qui contiendra le code de notre newsletter).
• Créer l’élément qui va permettre de lancer la fonctionnalité de copie dans le presse-papier (en l’occurence il s’agira d’un bouton).

Voici un exemple de code simple à intégrer dans votre fichier HTML : 

        <div id="newsletter-container">
        /* Le code de notre newsletter est placé ici */
</div>
    

        <button id="copy-newsletter-button" data-clipboard-target="#newsletter-container">Copier</button>
    

Comme vous pouvez le voir, on utilise l’attribut data-clipboard-target dans lequel on renseigne l’ID de l’élément à copier, pour déclencher la fonction. Dans le cas où vous souhaiteriez couper un élément plutôt que le copier, vous pouvez ajouter à votre bouton un second attribut data-clipboard-action permettant de préciser l’action à effectuer lors du clic sur le bouton :

        <button id="copy-newsletter-button" data-clipboard-target="#newsletter-container" data-clipboard-action="cut">Couper</button>
    

Maintenant que nos deux éléments sont créés, il ne nous reste plus qu’à activer la librairie Clipboard.js au clic sur notre bouton, en ajoutant ces lignes dans une balise script ou dans un fichier JS distinct : 

        (function(){
    new Clipboard('#copy-newsletter-button');
})();
    

Et voilà, votre système de « Copy to clipboard » est prêt ! Facile non ? Vous souhaitez aller un peu plus loin ? C’est parti.

Ajout d'un message de succès ou d’échec à Clipboad.js

Pour aller plus loin dans l’exérience utilisateur, voyons comment ajouter un message qui apparaîtra en dessous de notre bouton en cas de succès ou d’erreur lors du lancement de la fonctionnalité de « Copy to clipboard ».

Pour cela, rien de plus simple car Clipboard.js a créé des événements, respectivement appelés « success » et « error », que vous pouvez utiliser pour ajouter des actions à votre système de copie de code. Nous allons donc commencer par ajouter les deux paragraphes comprenant nos messages d’erreur et de succès dans le fichier HTML précédemment créé, juste en dessous du bouton :

        <p class="success-copy">Copie effectuée !</p>
<p class="error-copy">Erreur lors de la copie, veuillez réessayer.</p>
    

Et maintenant ajoutons le code permettant de masquer d’abord, puis d’afficher nos messages en fonction de l’exécution de la fonction :

        $('p.success-copy’).hide();
$('p.error-copy’).hide();
    

        // On success, show success message during 3 seconds
clipboard.on('success', function (e) {
    $('p.success-copy').show().delay(3000).fadeOut();
});
    

        // On error, show error message during 3 seconds
clipboard.on('error', function (e) {
    $('p.error-copy').show().delay(3000).fadeOut();
});
    

Lorsque l’internaute cliquera sur le bouton permettant de copier du contenu, il aura maintenant la possibilité de voir si la copie a bien été effectuée ou s’il doit re-cliquer sur le bouton pour relancer l’action.

Comme nous l’avons vu ensemble, Clipboard.js est donc une librairie Javascript simple d’utilisation, légère et facile à manipuler en ajoutant des fonctionnalités plus avancées. Il est tout de même important de préciser que puisqu’elle repose sur les méthodes Javascript « selection » et  « execCommand », elle ne fonctionnera que sur les navigateurs prenant en charge ces deux méthodes, à partie de : Chrome 42, Edge 12, Firefox 41, IE 9, Opera 29, Safari 10.