Blogs Javascript Copy To Clipboard

One way to enhance your web page is to provide an easy means for clients to copy something to their clipboard, simply by clicking on a button (similar to the Copy button that is on the below code example window frames on this web page).

In addition to providing convenience to the client, an enhancement like this also helps to ensure that only specific data gets copied to the clients clipboard.

In efforts to copy data to the client's clipboard instead of to the server's clipboard then a client side scripting language needs to be used, such as Javascript.

Example

The following code example is a Javascript function, which can be placed anywhere in the Body section of a web page. When the function is called, the id value of the element is passed to it, which the function will then attempt to read and copy the text data of that element into the clients clipboard:

<script>
function copyToClipboard(tempId)
{
  var tempElement = document.getElementById(tempId);
  var tempText = tempElement.innerText;
  navigator.clipboard.writeText(tempText);
  alert("The data is now copied to your clipboard");
}
</script>

By developing this code as a Javascript function allows you to re-use this same function in various places throughout a web page, which allows you to place and use multiple Copy button's and have each Copy button be capable of copying something different (such as is the case with the two Copy buttons that are on this web page).

To show the above Javascript function in use, the following HTML source code shows the function placed into the Body of an HTML web page, and demonstrates that when the button is clicked on then the button's onClick event makes a call to the Javascript function and passes to it the id value of the label element so that the function can copy that label elements text data to the clients clipboard:

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello World</title>
  </head>
  <body>
    <script>
      function copyToClipboard(tempId)
      {
        var tempElement = document.getElementById(tempId);
        var tempText = tempElement.innerText;
        navigator.clipboard.writeText(tempText);
        alert("label1 text is now copied to your clipboard");
      }
    </script>
     <h1>Hello World!</h1>
	 <hr/>
	 <label id="label1">Web Pages Are Cool!</label>
	 <button onclick="copyToClipboard('label1')">Copy</button>
  </body>
</html>

When you run the above example then you should see something similar to the following:

Final Thoughts

Thank you for reading, I hope you found this blog post (tutorial) educational and helpful.

	(0)
	(0)