Copy to Clipboard
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.
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 ( .. et une démo en direct)
dans le presse papier
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="clipboard.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script> <script src="index.js"></script> <title>Copy to Clipboard</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="clipWrap"> <div class="clipHead"> <div class="clip-input-group"> <span id="clip-dh-0"> Cliquez sur le bouton pour copier le code<br /> dans le presse papier </span> <span class="clip-input-group-button"> <button class="btn" id="btn0" type="button" data-clipboard-demo="" data-clipboard-target="#foo"> <!--img id="btn" class="clippy" src="../images/clippy.svg" width="13" alt="Copy to clipboard"--> Copy to Clipboard </button> </span> </div> </div> <pre class="clipSnippet content"> <code id="foo" > la ligne 1 la ligne 2 la ligne 3 </code> </pre> </div> </body> </html>
dans le presse papier
$(function(){ <!-- Instancier Clipboard --> var clipboard0 = new ClipboardJS('#btn0'); clipboard0.on('success', function(e) { //console.log(e); //console.log ("copied : action : " + e.action + " le texte : " +e.text ); $("#clip-dh-0").html('<span style="color:red"><strong>C\'est fait ; le code est dans le presse-papier </strong></span>'); $("#btn0").html('copied'); }); clipboard0.on('error', function(e) { //console.log(e); }); });
dans le presse papier
.wrap { margin: 0 auto 90px; max-width: 540px; padding: 0 15px; } .example { position: relative; margin: 15px 0 0; padding: 20px 20px 20px; background-color: #fff; border-radius: 4px 4px 0 0; border: 1px solid #ddd; z-index: 2; } .input-group { display: table; } .input-group-button { width: 1%; vertical-align: middle; } .input-group input, .input-group-button { display: table-cell; } .input-group-button:last-child .btn { margin-left: -1px; } .input-group input:last-child, .input-group-button:last-child .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group-button:last-child .btn { margin-left: -1px; } .input-group input:last-child, .input-group-button:last-child .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; } .clippy { margin-top: -3px; position: relative; top: 3px; } img { border: 0; } .btn { position: relative; display: inline-block; padding: 6px 12px; font-size: 13px; font-weight: 700; line-height: 20px; color: #333; white-space: nowrap; vertical-align: middle; cursor: pointer; background-color:#eee; background-image: linear-gradient(#fcfcfc,#eee); border: 1px solid #d5d5d5; border-radius: 3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; -webkit-user-select: none; -moz-user-select: none; -webkit-appearance: none; } .snippet { background: #f8f8f8; border-radius: 4px; border: 1px solid #ddd; clear: both; top: -20px; padding: 20px 0 0; }
Cliquez ici pour afficher ces fichiers dans une fenêtre surgissante
Analyse du 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é dans balise <div id=clipWrap> se découpe en 2 parties :
- une zone de "titre" de classe "clipHead" qui contient le texte du "titre"
(identifié "clip-dh-0") et le bouton "Copy to Clipboard ."
Le code <button class="btn" id="btn0" type="button" data-clipboard-demo="" data-clipboard-target="#foo"> est fondamental pour l'exécution du script. Seules les valeurs des paramètres id et data-clipbord-target peuvent être modifiées.
- id="btn0" est utile si l'on souhaite copier-coller des parties de code situées dans différentes zone de la page
- la valeur du paramètre data-clipbord-target est l'identifiant de la zone de code à copier-coller
- une zone identifiée "foo" contenant le texte proposé à la copie entre les balises <pre></pre>
Notez que le texte "Copy to Clipboard" peut être remplacé par une image (cf : <img id="btn0" class ="clippy" src="../images/clippy.svg" width="13" alt="Copy to clipboard"> )
Analyse du 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é "btn0" avec le code clipboard0 = new ClipboardJS('#btn0').

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 :
- $("#clip-dh-0").html('...') remplace le texte du titre grâce à
jQuery et l'identification id=clip-dh-0 de l'élément;
- $("#btn0").html('copied') remplace le texte du bouton par "copied", merci encore jQuery.

- 30 vues