Post
Ask Question

Copy And Download Value From Textarea Using JavaScript

This article with the use of some JavaScript functionalities will see how to copy the content present in textarea. Also how to download as a file data present in textarea. HTML input element textarea DOM(Documnet object model) element id will get by using document.getElementById() method. With the use of id we copy the values present in textarea by using addEventListener() function in JavaScript.

Below code is one of the examples of copying content in textarea

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
      .purple-border textarea {
        border: 1px solid #ba68c8;
      }

      .purple-border .form-control:focus {
        border: 1px solid #ba68c8;
        box-shadow: 0 0 0 0.2rem rgba(186, 104, 200, .25);
      }
    </style>
  </head>
  <body>
    <button class="btn btn-primary" id="copyID" style="margin-left: 280px;">
      <i class="fa fa-copy"></i>
    </button>
    <textarea class="form-control" id="textareainput" rows="5" cols="20">Text area input</textarea>
    </div>
    <script>
      var button = document.getElementById("copyID"),
        input = document.getElementById("textareainput");
      button.addEventListener("click", function(event) {
        event.preventDefault();
        input.select();
        document.execCommand("copy");
      });
    </script>
  </body>
</html>

This code output will be like a simple textarea and copy button

Once click on copy botton it will select the value that represents value as been copied

Now we go with how to download as a file content present in textarea. For downloading also get a textarea value by using DOM element and downloaded as a plain text file. Below code is an example of file downloading.

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
      .purple-border textarea {
        border: 1px solid #ba68c8;
      }

      .purple-border .form-control:focus {
        border: 1px solid #ba68c8;
        box-shadow: 0 0 0 0.2rem rgba(186, 104, 200, .25);
      }
    </style>
  </head>
  <body>
    <button class="btn btn-primary" id="copyID" style="margin-left: 280px;">
      <i class="fa fa-copy"></i>
    </button>
    <div class="form-group purple-border" style="width:500px;align:center">
      <textarea class="form-control" id="textareainput" rows="5" cols="20">Text area input</textarea>
    </div>
    <script>
      var button = document.getElementById("copyID"),
        input = document.getElementById("textareainput");
      button.addEventListener("click", function(event) {
        event.preventDefault();
        input.select();
        document.execCommand("copy");
      });
      // Start file download.
      document.getElementById("downloadbutton").addEventListener("click", function() {
        // Generate download of hello.txt 
        // file with some content
        var text = document.getElementById("textareainput").value;
        var filename = "TextareaInput.txt";
        download(filename, text);
      }, false);

      function download(file, text) {
        var element = document.createElement('a');
        element.setAttribute('href', 'data:text/plain;charset=utf-8, ' + encodeURIComponent(text));
        element.setAttribute('download', file);
        document.body.appendChild(element);
        //onClick property
        element.click();
        document.body.removeChild(element);
      }
    </script>
  </body>
</html>

Once click on the download icon we can get a downloaded file in plain text file format.


Similar Articles