Comment copier le texte dans le presse-papiers

Copier le texte dans le presse-papiers

Étape 1 - Ajouter HTML :

<!-- Text field -->
<input type="text" value="Hello World" id="myInput">
<!-- Bouton utilisé pour copier le texte -->
<button onclick="myFunction()">Copier le texte</button>

Deuxième étape - Ajouter JavaScript :

function myFunction() {
  // Obtenir le champ de texte
  var copyText = document.getElementById("myInput");
  // Sélectionner le champ de texte
  copyText.select();
  copyText.setSelectionRange(0, 99999); // Pour les appareils mobiles
   // Copier le texte du champ de texte
  navigator.clipboard.writeText(copyText.value);
  // Alerter le texte copié
  alert("Copié le texte: " + copyText.value);
}

Essayer par vous-même

Afficher le texte copié dans l'infobulle

Ajouter CSS :

.tooltip {
  position: relatif;
  affichage: en-ligne-bloc;
}
.tooltip .tooltiptext {
  visibilité: caché;
  largeur: 140px;
  couleur_de_fond: #555;
  couleur: #fff;
  alignement_de_texte: centre;
  rayon_angle: 6px;
  marge: 5px;
  position: absolu;
  z-index: 1;
  bas: 150%;
  gauche: 50%;
  marge_gauche: -75px;
  opacité: 0;
  transition: opacité 0.3s;
}
.tooltip .tooltiptext::after {
  contenu: "";
  position: absolu;
  haut: 100%;
  gauche: 50%;
  marge_gauche: -5px;
  largeur_de_bord: 5px;
  style_de_bord: solide;
  couleur_de_bord: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

Essayer par vous-même