Copy to Clipboard Button For Textarea – textToClipboard.js

Preview:

Description:

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 ...
</textarea>

<button type="button" class="copyBtn">
  Copy To Clipboard
</button>

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'
});

Changelog:

12/08/2023

• Add module.