Retourner à la page d'accueil de TJS

Script copy : Gestion du copier-coller

Bouton de copie dans le presse-papiers
Partie II : L'interactivité / Chapitre 12 : Manipuler le document / Page 191

Exécution du script

Emulation de la console

Code source

<html><head><title>Gestion du copier-coller</title><style type="text/css">  div.flash {    animation: flash 0.5s 1;  }  @keyframes flash {    from {background-color: #ba00bd;}    to {background-color: #fff;}  }</style></head><body><script type="text/javascript">document.addEventListener("readystatechange", function(evt) {  if (document.readyState=="interactive") {    /* Activation des boutons div.buttonCopy */    var btnCopys=document.querySelectorAll("div.buttonCopy");    for (var i=0; i<btnCopys.length; i++) {      btnCopys[i].addEventListener("click", btnCopy);    }     /* Détection de l'événement oncopy */    document.addEventListener("copy", function(evt) {      console.log("Détection de "+evt.constructor.name+" type="+evt.type);            });    /* Détection de l'événement onpaste */    document.addEventListener("paste", function(evt) {      console.log("Détection de "+evt.constructor.name+" type="+evt.type);         });  }});/* Fonction qui copie la zone de texte dans le presse papier */function btnCopy(evt) {  var btn=evt.currentTarget;  /* Recherche de l'identifiant du contenu à copier */  var id=btn.dataset.copy;  var elt=document.getElementById(id);  elt.parentNode.className="container";  console.log("ID de l'élément à copier = "+id);  /* Création de la sélection par programmation de Range */  var sel=window.getSelection();  var range=document.createRange();  range.selectNodeContents(elt);  console.log(range.toString());  sel.removeAllRanges();  sel.addRange(range);  /* Copy in the clipboard */  document.execCommand("copy");  /* Animation css flash sur l'élément container parent */  elt.parentNode.className="container flash";  /* Effacement de la sélection */  range.collapse();}</script>        <h1>Gestion du copier coller</h1><div class="titre">Copier votre adresse Bitcoin avec le bouton <i class="fas fa-copy light"></i></div><div class="container">  <div class="inline" id="bitcoin">    1K1FAKFAYLnn7cpPJrwsM9tw1sNLS5oCFj  </div>  <div class="buttonCopy" data-copy="bitcoin">    <i class="fas fa-lg fa-copy"></i>  </div></div><div class="titre">Copier votre adresse Ethereum avec le bouton <i class="fas fa-copy light"></i></div><div class="container">  <div class="inline" id="ethereum">0x810cb9c343290bcc31898199d944400283098533</div>  <div class="buttonCopy" data-copy="ethereum"><i class="fas fa-lg fa-copy"></i></div></div><style type="text/css">  /* CSS de mises en forme */   div {     box-sizing: border-box;  }  div.container {      padding:9px;      margin-top:4px;      margin-bottom:9px;    border:2px solid #333;    border-radius:5px;    display:inline-block;  }  div.inline {    display:inline-block;    text-align: center;    padding:5px;    margin:5px;  }  div.buttonCopy {    display:inline-block;    cursor:pointer;  }  div.buttonCopy:hover {    color:#ba00bd;   }  div.titre {      margin-top:10px;      font-weight:bold;  }  i.light {      color:#ccc;  }</style><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"></body></html>

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...

Nouveau service en ligne de TJS

cleanMyJS : Détectez toutes les erreurs JavaScript de vos sitescleanMyJS.com
Détectez, enregistrez et analysez toutes les erreurs JavaScript de vos sites
Le 27/06/2019 10:19:40 sur php7 en 102.24 ms