How to copy text to the clipboard
- Previous Page Hide Number Arrow
- Next Page Animation Search
Learn how to use JavaScript to copy text to the clipboard.
Click the button to copy text from the text field.
Copy the text to the clipboard
Step 1 - Add HTML:
<!-- Text field --> <input type="text" value="Hello World" id="myInput"> <!-- Button used to copy text --> <button onclick="myFunction()">Copy Text</button>
Step 2 - Add JavaScript:
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 text from the text field navigator.clipboard.writeText(copyText.value); // Alert the copied text alert("Copied the text: " + copyText.value); {}
Display copied text in the tooltip
Add 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; {}
- Previous Page Hide Number Arrow
- Next Page Animation Search