Script copy : Gestion du copier-coller

Bouton de copie dans le presse-papiers

Partie II : L'interactivité

Edition 1 | Chapitre 12 : Manipuler le document / Page 191

Edition 2 | Chapitre 12 : Manipuler le document / Page 206

Edition 3 | Chapitre 12 : Manipuler le document / Page 206

<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>

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>

Troisième édition Tout JavaScript chez Dunod

En savoir plus
Sortie le 4 janvier 2023

Version papier 29€90
Format électronique 22€99.

Commandez en ligne

Dunod Fnac Amazon

Le graph des objets JavaScript

Chargement
en cours...