Copy to Clipboard in Textarea

---

DESCRIPTION

---

Hello everyone! In this tutorial, you will learn how to create a button to copy text content to the clipboard using HTML, CSS and Javascript. This tutorial will be useful for the website content publishers who want to give their users to copy and paste the text contents easily using this copy button. Hope this video will be helpful.

---

HTML CODE

---

<center>

 <div style="box-sizing: border-box;padding: 10px;box-shadow: 0 0 10px gray;border-radius: 5px;width: 90%">

  <hr style="border: 2px solid #132df3;border-radius: 5px;">

  <p style="color: #132df3;font-weight: bold;text-justify: center;margin: 5px;">HTML CODE</p>

   <hr style="border: 2px solid #132df3;border-radius: 5px;">

   <textarea style="border: 2px solid #132DF3;border-radius: 5px;padding: 30px;font-size: 10px;font-family: 'montserrat',sans-serif;width: 70%;" class="textarea"rows="10" cols="30" readonly id="input">HERE</textarea>

 </div>

</center><br>

<center><button id="copy" style="border: none;background: #132df3;color: white;border-radius: 5px;padding: 10px;font-weight: bold;width: 180px;">COPY</button></center>

 <script>

 function copy() {

  var copytext = document.querySelector("#input");

  copytext.select();

  document.execCommand("copy")

 }

 document.querySelector("#copy").addEventListener("click",copy)

</script>