Hur man kopierar text till klippbordet

Kopiera text till klippbordet

Steg 1 - Lägg till HTML:

<!-- Text field -->
<input type="text" value="Hello World" id="myInput">
<!-- Knapp för att kopiera text -->
<button onclick="myFunction()">Kopiera text</button>

Steg 2 - Lägg till JavaScript:

function myFunction() {
  // Hämta textfält
  var copyText = document.getElementById("myInput");
  // Välj textfält
  copyText.select();
  copyText.setSelectionRange(0, 99999); // För mobila enheter
   // Kopiera text från textfältet
  navigator.clipboard.writeText(copyText.value);
  // Varna om kopierad text
  alert("Kopierad text: " + copyText.value);
}

Prova själv

Visa kopierad text i verktygstips

Lägg till CSS:

.tooltip {
  position: relativ;
  visning: inline-block;
}
.tooltip .tooltiptext {
  synlighet: dold;
  bredd: 140px;
  bakgrundsfärg: #555;
  färg: #fff;
  text-align: center;
  rundning: 6px;
  fyllning: 5px;
  position: absolut;
  z-index: 1;
  nedre: 150%;
  vänster: 50%;
  marginalt till vänster: -75px;
  opacitet: 0;
  övergång: opacitet 0.3s;
}
.tooltip .tooltiptext::after {
  innehåll: "";
  position: absolut;
  överst: 100%;
  vänster: 50%;
  marginalt till vänster: -5px;
  gränsbredd: 5px;
  gränsstil: fast;
  gränsfärg: #555 genomskinlig genomskinlig genomskinlig;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

Prova själv