如何将文本复制到剪贴板

学习如何使用 JavaScript 将文本复制到剪贴板。

单击此按钮可从文本字段复制文本。

将文本复制到剪贴板

第1步 - 添加 HTML：

评论字段
<input type="text" value="Hello World" id="myInput">
<!-- Kopiointipainike -->
<button onclick="myFunction()">Kopioi teksti</button>

Toinen vaihe - Lisää JavaScript:

function myFunction() {
  // Hae tekstikenttä
  var copyText = document.getElementById("myInput");
  // Valitse tekstikenttä
  copyText.select();
  copyText.setSelectionRange(0, 99999); // Mobile devices
   // Kopioi tekstikentän sisältö
  navigator.clipboard.writeText(copyText.value);
  // Ilmoita kopioitu teksti
  alert("Kopioitu teksti: " + copyText.value);
}

Kokeile itse

Näytä kopioitu teksti työkalupalkissa

Lisää CSS:

.tooltip {
  sijainti: suhteellinen;
  näyttö: sisäinen;
}
.tooltip .tooltiptext {
  näkymä: piilotettu;
  leveys: 140px;
  taustaväri: #555;
  tekstin väri: #fff;
  tekstin tasaus: keskitetty;
  kulmavärit: 6px;
  pohjaleveys: 5px;
  sijainti: absoluuttinen;
  sivupaneelin taso: 1;
  ala: 150%;
  vasen: 50%;
  vasen marginaali: -75px;
  opakkuus: 0;
  siirtymä: opakkuus 0.3s;
}
.tooltip .tooltiptext::after {
  sisältö: "";
  sijainti: absoluuttinen;
  ylä: 100%;
  vasen: 50%;
  vasen marginaali: -5px;
  reunaleveys: 5px;
  reunatyylit: kiinteä;
  reunukkeen väri: #555 läpinäkyvä läpinäkyvä läpinäkyvä;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

Kokeile itse