How to Create Copy to Clipboard Button Using ClipboardJS?

How to Create Copy to Clipboard Button Using ClipboardJS?

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.

In this tutorial, I will show you an easy example of how to create a copy to clipboard button using the ClipboardJS library. Follow these steps:

1

Add clipboard.min.js JavaScript Between Head Tag

Add the following JavaScript using the CDNJS URL into the script tags:

https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js

2

Create a Textarea Item

Create a textarea item and specify the ID myText. Below is an example:

<textarea id="myText"></textarea>
3

Create a Copy Button

Create a button and specify an ID or Class. This is important because that ID or Class will be used by the ClipboardJS. Also, you need to specify the attribute for the action type data-clipboard-action="copy" and one more attribute for the target element ID data-clipboard-target="#myText". This will target the above textarea. Below is an example:

<button type="button" class="copy" data-clipboard-action="copy" data-clipboard-target="#myText">Copy to Clipboard</button>
4

Add JavaScript Code

Now add the following JavaScript code in the head tags between script tags:

  new ClipboardJS('.copy');

You can notice that we specify the button class here as .copy. If you specified an ID or another class then you need to pass that ID or class name. For example:

 new ClipboardJS('#idCopy');

It is done. We have created a copy to clipboard button using the ClipboardJS JavaScript library. Now when you will click the Copy to Clipboard button, it will select and copy the text of the textarea item.