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)

    Read next

    jaylin profile image

    Extending Types Without Modification: The Wrapper Pattern Journey

    林鉦傑 -

    davidjonson profile image

    Best Programming Language to Develop E-commerce Platforms

    David Jonson -

    abstractmusa profile image

    Install AWS CLI (Command Line Interface) on Ubuntu

    Md Abu Musa -

    divingwrist38 profile image

    Exploring the Significance of Historical Artistry

    Cooke Munro -