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>

What the above html code do is


<input type="text" value="text me to copy" id="mycopy">

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>

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>

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

This is to select the range of the text


document.execCommand("copy");

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>

Feel free to leave comment

Blog

Copy text to clipboard in html using javascript

popoola Temitope

HTML Part

JavaScript Part

Join Our Newsletter. No Spam, Only the good stuff.

Related