How to copy text to the clipboard

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);
{}

Try It Yourself

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;
{}

Try It Yourself