July 5, 2019

How to Copy Text to Clipboard in Javascript using Clipboard JS

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to copy text to clipboard in javascript. You must have seen websites where they put a copy icon or copy button right next to an input field and as a result, it helps users to copy the content of that input field easily.

There are multiple ways to copy text to the clipboard in javascript. The easiest solution involves the usage of Clipboard API and we have covered this in how to copy and paste text in javascript tutorial.

At this time, we are going to make use of third-party library Clipboard JS to accomplish our goal. We will only cover the basics of this library, but for advanced usage, I suggest you to check out its official page.

In the following example, we have multiple input fields and they all have a button right next to them. Upon click of a button, we will copy text from the corresponding input field and paste it in the textarea element using Ctrl+V just for demonstration. Please have a look over the code example and the steps given below.

HTML & CSS

We have 4 elements in the HTML file (div, input, textarea, and button).
We have multiple button elements and they all have “Copy” as innerText.
We have given each input element a unique id.
We are establishing a link between an input element and button element by using the data-clipboard-target attribute. This is required to make Clipboard JS work.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have added CDN link of Clipboard JS at the bottom of the HTML file using the script tag.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">    
    <title>Document</title>
</head>
<body>
    
    <div>
        <input type="text" id="input1">
        <button data-clipboard-target="#input1">COPY</button>        
    </div>

    <div>
        <input type="text" id="input2">
        <button data-clipboard-target="#input2">COPY</button>        
    </div>

    <div>        
        <button data-clipboard-text="Hello World">COPY</button>        
    </div>

    <div>
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </div>

    <script src="https://unpkg.com/clipboard@2/dist/clipboard.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

body {
    background: #2c3e50;
}

div {
    margin-bottom: 10px;
}

Javascript

We have selected all the button elements using the document.querySelectorAll() method and stored them in buttons variable.
We are initializing Clipboard JS and storing the returned object in the clipboard variable. As you can see, we are passing buttons variable to the constructor of Clipboard JS. This is required to attach an event listener to each button element.
We have attached a success and error event listener to the clipboard. In the event handler function, we are simply logging details of the event in the console window using console.info() and console.error() methods.
Clipboard JS does have some compatibility issues with certain browsers. For that purpose, it has a static method isSupported() which returns a Boolean value. We are calling this method and logging the output in the console window.

let buttons = document.querySelectorAll('button');

let clipboard = new ClipboardJS(buttons);


clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});


console.log(ClipboardJS.isSupported());

You May Also Like: