How to create copy to clipboard button using jQuery

What Will I Learn?

You will learn how to use jQuery
You will learn how to block some element
You will learn how to copy a text to clipboard

Requirements

Basic knowledge about HTML
Basic knowledge about JavaScript
You have to install or host the jQuery file, You can add jQuery CDN if you don't want to install or host it
To practice this tutorial you should have a text editor and a browser. In this tutorial I use Visual Studio Code for text editor and Google Crome for browser.

Difficulty

Basic

Tutorial Contents

Copy on clipboard button is a button to copy and text of an HTML element. By clicking the button you will automatically copy on the text selected on your clipboard. For more detail, Lets follow and pay attention on steps bellow.

Creating sample HTML element

Open your Text editor
Create new file save as copy.html
Add the HTML element as usual.

<html>
<head>
<title>copy to clipboard</title>
</head>
<body>
</body>
</html>

Create a sample html element, Here I create input element,

<input type="text" id="data">

Create a button for copy clipboard

<button type="button" id="copy">Copy</button>

$Adding jQuery Script

As we know, to use jQuery we need to install or host it. Or we can also add jQuery CDN if we don't want to install or host it. we also have many choices CDN that we can use, either Google CDN or Microsoft CDN. For more Detail you can visit jquery official web. In this tutorial I use Google CDN. Add the CDN in <head> element.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

To write the jQuery Script we should open <script> tag. You can put it in <head> element or in <body> element.

<script></script>

Before add more event in jQuery. There is an event that we should add for the first. It is ready() event. this event to make sure that all html elements are loaded. if it is, then it will load jQuery script. So, all jQuery Script must write in this function event.

$(document).ready(function(){
});

Select the button and add click event function

$("#copy").click(function(){
});

To select the data that want to copy you can use select() event. Select the element that you want to copy then add select() event.

$("#data").select();

To copy the data that was selected you can use

document.execCommand("copy");

Create the message that you will display it if the copy was success. for example here i use alert function

alert("Copied On clipboard");

$Running / testing

Save the file and run on your browser.

Write some thing on input element then click the copy button
Try to paste it on other place.

$Full Code

<html>
<head>
<title>copy to clipboard</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="data">
<button type="button" id="copy">Copy</button>
<script>
$(document).ready(function(){
    $("#copy").click(function(){
        $("#data").select();
      document.execCommand("copy"); 
    alert("Copied On clipboard");
    });
});
    </script>
</body>
</html>

LIVE DEMO

Curriculum

Posted on Utopian.io - Rewarding Open Source Contributors