Javascript Copy to Clipboard from TextArea

Welcome Folks I am back with another blog post. In this post I will be talking about how to make a copy to clipboard widget in Javascript. Let’s follow the steps given below to make this application.

READ  How to Change Element Opacity When User Scrolls Down the Page in Browser Using jQuery in Javascript

 

 

Whole Source Code

 

<!DOCTYPE html>
<html>
  <head>
    <title>Copy to Clipboard</title>
  </head>
  <body>
    <center>
    <textarea id="text" rows="13" cols="60">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, quas eveniet eaque maxime, iste veritatis corrupti minima laborum beatae voluptatem nihil, a tempora? At libero consectetur, porro eligendi sunt ratione.
    </textarea>
    <br>
    <button onclick="copy()">Copy</button>
    <br>
    <textarea id="target" cols="60" rows="13"></textarea>
    </center>

    </textarea>
  </body>
  <script>
    function copy()
    {
      var text = document.querySelector("#text");
      var range = document.createRange();

      range.selectNode(text);
      window.getSelection().addRange(range);
      document.execCommand('copy');
    }
  </script>
</html>

 

Leave a Reply