Copy to Clipboard Button For Textarea – textToClipboard.js

Category: Form , Javascript | December 8, 2023
Views Total:42 views
Official Page:Go to website
Last Update:December 8, 2023


Copy to Clipboard Button For Textarea – textToClipboard.js


TextToClipboard is a tiny JavaScript library that allows you to quickly implement a copy-to-clipboard functionality on your website. It enables a simple HTML button to copy text from a specified textarea element directly to the user’s clipboard. Upon successful copy, it displays a temporary message to confirm the operation.

How to use it:

1. Download and load the textToClipboard.min.js script in the document.

<script src="textToClipboard.min.js"></script>

2. Add a copy-to-clipboard button next to the textarea element.

<textarea class="textBody">
  ... Content To Copy ...
<button type="button" class="copyBtn">
  Copy To Clipboard

3. Add a feedback message to the copy-to-clipboard button.

<span class="copied" style="display: none">Copied!</span>

4. Call the TextToClipboard() function and the library will do the rest.

document.addEventListener('DOMContentLoaded', function() {
  new TextToClipboard();

5. Override the default CSS classes.

new TextToClipboard({
  copyButtonClass: 'copyBtn',
  copiedClass    : 'copied',
  textBodyClass  : 'textBody'



  • Add module.

You Might Be Interested In:

Leave a Reply