Sådan kopieres tekst til udklipsholderen

Lær hvordan man bruger JavaScript til at kopiere tekst til udklipsholderen.

Klik på denne knap for at kopiere teksten fra tekstfeltet.

Kopier teksten til udklipsholderen

Første trin - Tilføj HTML:

<!-- Tekstfelt -->
<input type="text" value="Hello World" id="myInput">
<!-- Bruges til at kopiere tekst -->
<button onclick="myFunction()">Kopier tekst</button>

Første trin - Tilføj JavaScript:

function myFunction() {
  // Få tekstfelt
  var copyText = document.getElementById("myInput");
  // Vælg tekstfelt
  copyText.select();
  copyText.setSelectionRange(0, 99999); // Til mobile enheder
   // Kopier tekst fra tekstfeltet
  navigator.clipboard.writeText(copyText.value);
  // Advar om kopieret tekst
  alert("Kopieret tekst: " + copyText.value);
{}

Try it yourself

Vis kopieret tekst i værktøjslinjen

Tilføj CSS:

.tooltip {
  position: relative;
  display: inline-block;
{}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
{}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
{}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
{}

Try it yourself