Categories: Development

Javascript click button to copy textarea or input

How to do a button click to copy for a text box or input with HTML and a little bit of Javascript.

The HTML (bootstrap):

<div class="container">
  <div class="row mt-2">
    <div class="col-6">
      <button id="words" class="btn btn-primary mb-2">Copy text area</button>
      <br />
      <textarea id="text_copy" class="form-control" name="text_copy" rows="5" cols="12" readonly>
Word
Word2
Word3
Word4</textarea>
      <br />
    </div>
    <div class="col-6">
      <button id="input-btn" class="btn btn-primary mb-2">Copy input</button>
      <br />
      <input type="text" class="form-control" id="input" name="input" value="test text to copy">
    </div>
  </div>
</div>

The Javascript functions to copy the text:

document.querySelector("#words").onclick = function () {
  document.querySelector("#text_copy").select();
  document.execCommand("copy");
};

document.querySelector("#input-btn").onclick = function () {
  document.querySelector("#input").select();
  document.execCommand("copy");
};

CodePen link.

Share

Recent Posts

Kennington reservoir drained drone images

A drained and empty Kennington reservoir images from a drone in early July 2024. The…

2 years ago

Merrimu Reservoir drone images

Merrimu Reservoir from drone. Click images to view larger.

2 years ago

Early September spring shots

Some early September spring shots from a bushwalk, It is still too early for wildflowers.

3 years ago

Cloning an NVMe to SK Hynix Platinum P41 NVMe

I recently needed to clone over a smaller NVMe to a 2TB SK Hynix Platinum…

3 years ago

Using Laravel’s deleteDirectory to delete folders and their contents

If you ever needed a simple solution in Laravel to delete an entire directory and…

3 years ago

How to allow only 1 user to register in a Laravel application

How to enforce only one user to register or be registered in a Laravel web…

3 years ago