DEV Community

popoola Temitope
popoola Temitope

Posted on

Copy text to clipboard in html using javascript

In this post we are going to learn how to copy text on a webpage direct to our client device.

HTML Part

Note this only work with select text.
Create a html file and copy the code below in the file.

 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <!-- The text field --> <input type="text" value="text me to copy" id="mycopy"> <!-- The button used to copy the text --> <button onclick="myFunction()">Copy text</button> </body> </html>
Enter fullscreen mode Exit fullscreen mode

What the above html code do is

 <input type="text" value="text me to copy" id="mycopy">
Enter fullscreen mode Exit fullscreen mode
  • This is an input tag that will contain the value of the text we want to copy and the attribute id="mycopy" to identify the input tag that we also want to select and copy.


    •  <button onclick="myFunction()">Copy text</button>
    Enter fullscreen mode Exit fullscreen mode
  • the above button tag contain onclick="myFunction()" which when user click on the button the text will be copy.

    • JavaScript Part

     <script> function myFunction() { /* Get the text field */ var copyText = document.getElementById("mycopy"); /* Select the text field */ copyText.select(); copyText.setSelectionRange(0, 99999); /* For mobile devices */ /* Copy the text inside the text field */ document.execCommand("copy"); /* Alert the copied text */ alert("Copied the text: " + copyText.value); } </script>
    Enter fullscreen mode Exit fullscreen mode

    What the above script code do is:

  • we create the myFunction() function tht will copy the text whenever is call

    • var copyText = document.getElementById("mycopy");

  • Here will get id of the text we want to copy "mycopy"

    • copyText.select();

  • This'll select the input/text area automatic, which will allow us to copy the selected text. 
    •  copyText.setSelectionRange(0, 99999);
    Enter fullscreen mode Exit fullscreen mode
  • This is to select the range of the text 



    •  document.execCommand("copy");
    Enter fullscreen mode Exit fullscreen mode
  • This code copy the text to the clipboard. 



    •  <!DOCTYPE html> <html> <head> <title></title> </head> <body> <!-- The text field --> <input type="text" value="text me to copy" id="mycopy"> <!-- The button used to copy the text --> <button onclick="myFunction()">Copy text</button> <script> function myFunction() { /* Get the text field */ var copyText = document.getElementById("mycopy"); /* Select the text field */ copyText.select(); copyText.setSelectionRange(0, 99999); /* For mobile devices */ /* Copy the text inside the text field */ document.execCommand("copy"); /* Alert the copied text */ alert("Copied the text: " + copyText.value); } </script> </body> </html>
    Enter fullscreen mode Exit fullscreen mode

    Feel free to leave comment

    Top comments (0)