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

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

DEV Community

Copy text to clipboard in html using javascript

HTML Part

JavaScript Part

Speedy emails, satisfied customers

Top comments (0)

A Workflow Copilot. Tailored to You.

Read next

Microsoft's Journey into Open Source: A Transformational Tale

Embracing Open Source Licensing in Cyber Defense

License-Token: How Technology Is Revolutionizing Open Source Compliance

Exploring Intent-Based Networking for Autonomous Networks

Okay