Forum Francophone sur la crypto monnaie, le Bitcoin et les Altcoins


    Comment programmer un bouton "Copy To Clipboard"

    Partagez
    avatar
    MikeBitcoin
    Admin

    Messages : 3
    Date d'inscription : 23/02/2017
    Age : 42
    Localisation : France

    Comment programmer un bouton "Copy To Clipboard"

    Message par MikeBitcoin le Ven Fév 24, 2017 6:05 am

    Comme vous avez pu le constater sur la page Contact du site, j'ai mis en place des boutons ayant pour fonction de copier dans le presse papier (Copy To Clipboard) afin de faciliter la copie des adresses de portefeuille.

    Pour y parvenir, je me suis inspiré du code source présenté par Craig Buckler sur le site suivant :

    https://www.sitepoint.com/javascript-copy-to-clipboard

    Pour créer le site, j'utilise le logiciel gratuit OpenElement qui permet l'ajout d'un bloc de code visuel dans une page.

    J'ai adapté le code à mes besoins avec Notepad++ et vous le présent :

    Code:

    <html>
    <head>
    <style> </style>

    <script> window.console = window.console || function(t) {}; </script>
    <script> if (document.location.search.match(/type=embed/gi)) { window.parent.postMessage("resize", "*"); } </script>

    </head>

    <body translate="no">
       
    <label for="btc">Adresse Wallet Bitcoin:</label>
    <input id="btc" value="1GhLTTukoPS5o2HWVJ1cDR4FazvY1Rr2W5" type="text">
    <button data-copytarget="#btc">copy</button>

    <label for="ltc">Adresse Wallet Litecoin:</label>
    <input id="ltc" value="Lfx141vZ8F9UKTWqwo1uGfzq3B8HWVBjPz" type="text">
    <button data-copytarget="#ltc">copy</button>
       
    <label for="doge">Adresse Wallet Dogecoin:</label>
    <input id="doge" value="DDzgcv4QN3ojXcUWqcLhRu3qVJ2ZppQWCz" type="text">
    <button data-copytarget="#doge">copy</button>

    <script src="//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-58d22c749295bca52f487966e382a94a495ac103faca9206cbd160bdf8aedf2a.js"></script>
     
    <script>
    (function () {
    'use strict';
    document.body.addEventListener('click', copy, true);
    function copy(e) {
    var t = e.target, c = t.dataset.copytarget, inp = c ? document.querySelector(c) : null;
    if (inp && inp.select) {
    inp.select();
    try {
    document.execCommand('copy');
    inp.blur();
    t.classList.add('copied');
    setTimeout(function () {
    t.classList.remove('copied');
    }, 1500);
    } catch (err) {
    alert('please press Ctrl/Cmd+C to copy');
    }
    }
    }
    }());
     //# sourceURL=pen.js
    </script>

    <a href="" id="__captchaReAnother"></a><a href="" id="__captchaReActive"></a>
    </body>
    </html>

    Voilà pour ce premier partage, bonne journée à bientôt !  Very Happy
    Mike

      La date/heure actuelle est Ven Aoû 18, 2017 3:21 am