How to implement Javascript copy to clipboard . ?

We will learn how to implement javascript copy to clipboard and paste it into another textarea. Javascript is one of the most used and popular scripting languages. Javascript not only executes in the browser, with the release of nodejs we can execute javascript at the server.

We have seen a javascript clipboard example an application like embedded video URL, teaxtarea, and coupon, etc. We can copy content from any HTML element like the Textarea field. div and input element to the clipboard is easy.

There are two ways browser extensions can interact with the system clipboard:

  1. The Document.execCommand() method
  2. The modern asynchronous Clipboard API.

Example of Javascript copy to clipboard

We’ll use Document.execCommand() method to copy the content of div to the clipboard and paste clipboard to textarea input.

Javascript copy to clipboard example
<!DOCTYPE html>
<html>
<head>
<script>
function copyClipboard() {
  var elm = document.getElementById("textAreaClipboard");
  // for Internet Explorer

  if(document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(elm);
    range.select();
    document.execCommand("Copy");
    alert("Copied div content to clipboard");
  }
  else if(window.getSelection) {
    // other browsers

    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(elm);
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("Copy");
    alert("Copied div content to clipboard");
  }
}
</script>
</head>
<body>
   <h2>Javascript clipboard example</h2>
    	
   <div class="code-bg">
      Click on the button to copy the text from the div element. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect. Demo data - Here type your own data.
   </div>
   <br/><br/>
   <button onclick="copyClipboard()">Copy div text to clipboard</button>
   <br/><br/>
   
   <textarea id="textAreaClipboard"  name="w3review" rows="4" cols="50">
At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.
</textarea>
</body>
</html>

Paste Javascript clipboard content to textarea element.

Once we have successfully copied the javascript clipboard, then we can paste it in any place we want. Here we have modified our previous example and add a new textarea and button before the body.

<div>
   <button onclick="pasteFromClipboard()">Paste from clipboard</button><br/>
   <textarea id="pasteTextarea" name="w3review" rows="4" cols="50"></textarea>
</div>

In the above code, we have added textarea with id pasteTextarea, here we’ll paste our Javascript clipboard copy content and we also have a button with callback function pasteFromClipboard(). Let’s implement paste code after Javascript clipboard copy code.

  function pasteFromClipboard() {
    var pasteText = document.querySelector("#pasteTextarea");
    navigator.clipboard.readText().then(text =>  {
        pasteText.innerText = text.toString();
    });
 }

Here is screenshot of the Javascript clipboard paste, it will ask permission to read from the navigator.clipboard object.

javascript clipboard example

Conclusion
We have completed an example of how to copy the content of textarea HTML an element to the clipboard in javascript. You can use clipboard.js to perform the same functionality.

Related posts

2 thoughts on “How to implement Javascript copy to clipboard . ?”

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top