How to Copy the Text to the Clipboard with JavaScript

Copying the text to clipboard makes it easier using the web page, so users will definitely like this functionality. You can create it by the help of JavaScript and we’re here to help you.

You need to use the document.execCommand() method. Let’s move on step by step!

1. Add HTML

Create an input type and give a value, which should be the text you want to be copied. Then use the HTML <button> tag with the onclick attribute. It means when the button is clicked, it will execute the defined function. Let’s see the code to make it clearer.

<!-- The text field -->
<input type="text" value="Lorem Ipsum" id="myInput">

<!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>

2. Add JavaScript

Have a look at the following piece of code to get what you need to do with JavaScript.

function myFunction() {
  /* Get the text field */
  var copyText = document.getElementById("myInput");

  /* Select the text field */
  copyText.select();

  /* Copy the text inside the text field */
  document.execCommand("copy");

  /* Alert the copied text */
  alert("Copied the text: " + copyText.value);
}

3. Add CSS

In order to display the copied text in a tooltip, we use CSS. Define the CSS position property to its “relative” value for the tooltip and to “absolute” for the tooltip text. Set the CSS display property to its “inline-block” value to display the tooltip as an inline-level block container. Hide the text by defining the “hidden” value of the visibility property. It must be shown when the user places the mouse over it. For that purpose, we use the CSS :hover selector. Use other CSS properties needed to style the tooltip. Here is our code:

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

Now let’s bring all the parts together and enjoy the result!

Example

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .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;
      }
    </style>
  </head>
  <body>
    <p>Click on the button to copy the text from the text field. Paste the text (e.g. ctrl+v) in a different window, to see the effect.</p>
    <input type="text" value="Lorem Ipsum" id="myInput">
    <div class="tooltip">
      <button onclick="myFunction()" onmouseout="outFunc()">
      <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
      Copy text
      </button>
    </div>
    <p>The document.execCommand() method is not supported in IE8 and earlier.</p>
    <script>
      function myFunction() {
        var copyText = document.getElementById("myInput");
        copyText.select();
        document.execCommand("copy");
        
        var tooltip = document.getElementById("myTooltip");
        tooltip.innerHTML = "Copied: " + copyText.value;
      }
      
      function outFunc() {
        var tooltip = document.getElementById("myTooltip");
        tooltip.innerHTML = "Copy to clipboard";
      }
    </script>
  </body>
</html>

Now let’s have a look at another example when we use a modal box instead of the tooltip.

Example

<!DOCTYPE html>
<html>
  <head>
    <style> 
      h1 { 
      border: 1px solid black; 
      height: 90px; 
      padding-top: 40px; 
      background: black; 
      color: orange; 
      } 
    </style>
  </head>
  <body style = "text-align:center;">
    <h1 style = "color:orange;" >  
      W3Docs 
    </h1>
    <input type="text" value="Copy me" id="W3docsInput">
    <button onclick="W3Docs()">Copy text</button> 
    <script>
      function W3Docs() {
        var copyW3docsText = document.getElementById("W3docsInput");
        copyW3docsText.select();
        document.execCommand("copy");
        alert("Copied the text: " + copyW3docsText.value);
      } 
    </script>
    <p>Click on the button to copy the text from the field.
      Try to paste the text (e.g. "ctrl+v") to see the effect.
    </p>
  </body>
</html>
Learn how to create a modal box in our snippet How to Create a Modal Dialog Box with CSS and JavaScript.

Do you find this helpful?

Related articles