How TO - Copy Text to Clipboard
Learn how to copy text to the clipboard with JavaScript.
Click on the button to copy the text from the text field.
Copy Text to Clipboard
Step 1) Add HTML:
Example
<!-- The text field -->
<input type="text" value="Hello World" id="myInput">
<!-- The button used to copy the text -->
<button onclick="myFunction()">Copy
text</button>
Step 2) Add JavaScript:
Example
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);
}
Try it Yourself »
Display Copied Text in a Tooltip
Add CSS:
Example
.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 »
