Jak skopiować tekst do schowka

Skopiuj tekst do schowka

Krok 1 - Dodaj HTML:

<!-- Tekst pola -->
<input type="text" value="Hello World" id="myInput">
<!-- Przycisk do kopiowania tekstu -->
<button onclick="myFunction()">Skopiuj tekst</button>

Krok 2 - Dodaj JavaScript:

function myFunction() {
  // Uzyskaj pole tekstowe
  var copyText = document.getElementById("myInput");
  // Wybierz pole tekstowe
  copyText.select();
  copyText.setSelectionRange(0, 99999); // Dla urządzeń mobilnych
   // Skopiuj tekst z pola tekstowego
  navigator.clipboard.writeText(copyText.value);
  // Powiadom o skopiowanym tekście
  alert("Skopiowano tekst: " + copyText.value);
}

Spróbuj sam

Wyświetl skopiowany tekst w tooltipie

Dodaj CSS:

.tooltip {
  pozycja: względna;
  wyświetl: blok;
}
.tooltip .tooltiptext {
  widoczność: ukryty;
  szerokość: 140px;
  kolor-tła: #555;
  kolor: #fff;
  wyśrodkowanie-tekstu: środek;
  zaokrąglenie-krawędzi: 6px;
  wypełnienie: 5px;
  pozycja: absolutna;
  indeks-z: 1;
  dol: 150%;
  lewo: 50%;
  margines-lewy: -75px;
  nieprzejrzystość: 0;
  przejście: nieprzejrzystość 0.3s;
}
.tooltip .tooltiptext::after {
  zawartość: "";
  pozycja: absolutna;
  góra: 100%;
  lewo: 50%;
  margines-lewy: -5px;
  szerokość-krawędzi: 5px;
  styl-krawędzi: solid;
  kolor-krawędzi: #555 przezroczysty przezroczysty przezroczysty;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

Spróbuj sam