Hoe OM - Kopieer teks na knipbord
Leer hoe om teks na die knipbord te kopieer met JavaScript.
Klik op die knoppie om die teks uit die teksveld te kopieer.
Kopieer teks na knipbord
Stap 1) Voeg HTML by:
Voorbeeld
<!-- The text field -->
<input type="text" value="Hello World" id="myInput">
<!-- The button used to copy the text -->
<button onclick="myFunction()">Copy
text</button>
Stap 2) Voeg JavaScript by:
Voorbeeld
function myFunction() {
/* Get the text field */
var copyText = document.getElementById("myInput");
/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999); /* For mobile devices */
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText.value);
/* Alert the
copied text */
alert("Copied the text: " + copyText.value);
}
Wys gekopieerde teks in 'n nutswenk
Voeg CSS by:
Voorbeeld
.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;
}