Copie en un clic

Présentation

Pour certains types de sites, il est pratique que le visiteur puisse copier du texte ou du code dans le presse papier pour le coller dans son éditeur en un seul clic. Cela évite les petites erreurs de sélection bien embêtantes.

Vous avez peut-être déjà vu des zones grisées avec un bouton "Copier" ou autre sur des sites de formation ou des forums. Avec TOWeb on ne peut pas le faire, donc voilà un petit script qui vous permettra de réaliser cette option.

Le script

Le script fait appel à un <textarea> qui est appelé " Texte multiligne" dans les formulaires de TW.

Voici ce code à copier/coller dans un champ HTML que vous placerez ensuite dans un paragraphe.
Paradoxalement, je ne peux vous mettre le code avec mon script car il y a les balises </textarea> qui interfèrent, vous devrez donc sélectionner et copier le texte vous-même, mais vous pouvez voir ce que ça donne dans l'exemple ci-dessous.


<button type="btn" style="font-size:12px; border:none" onclick="macopie1()">Copier le code</button><br>
<textarea id="macopie1" style="cursor:default; width:70%;" rows="10" readonly>
   Inclure le
   texte ici
</textarea><br>
<script>
function macopie1() {
   var copyText = document.getElementById("macopie1");
   copyText.select();
   document.execCommand("Copy");
   alert("Le code est copié dans le presse papier");   
 } 
</script>


Un peu d'explications

Je vous conseille de conserver ce script en tant que modèle, chaque fois que vous en aurez besoin, vous le dupliquez et le renommez avant tout.
Vous devez ensuite écrire ou coller le texte entre <textarea> et </textarea>, en fait vous remplacez "Inclure le texte ici".
Il vous faut ensuite ajuster la largeur en modifiant la valeur de 'width:xx%' et la hauteur dans 'rows="10" '. Pour la hauteur, cela correspond au nombre de lignes + 1 de votre texte à moins que s'il est plus grand, les ascenseurs ne vous embêtent pas, (pour les textes longs, c'est même mieux d'avoir ces ascenseurs).

Si vous avez plusieurs zones dans la page, vous devez en plus incrémenter les  4  "macopie1" dans le script, vous aurez donc 4 fois  "macopie2"...(2 fois ' macopie1 ' et 2 fois ' macopie1() ' )  ...etc.


Ceci est un exemple




Comme vous voyez j'ai en plus une image de 16x16 px devant le bouton. Dans la ligne <button type......<br>  , il faut ajouter devant   Copier le code  ,    <img src="_fields/monfichierimage" />   et ajouter l'image (.jpg  ou  .png)  dans les   Fichiers additionnels  de l'un des champs HTML,  la fin de la ligne est donc     onclick="macopie1()"><img src="_fields/monimage.jpg />Copier le code</button><br>