[How to] jQuery On Click Copy To Clipboard

“Copy to clipboard” is something any developer using it many times and We are very much sure that most of the time developers are using some APIs like clipboard.js. There is no problem using but you’ve to include an additional JS for it.

So rather than using any API, this can be done easily with jQuery!

How? We’ve the code ready to use for you. So look at the code below and start implementing 🙂

Here is the function that we’ve prepared:

function copyToClipboard(element) {
 var $temp = $("<input>");
 $("body").append($temp);
 $temp.val($(element).html()).select();
 document.execCommand("copy");
 $temp.remove();
}

And use the above function on button click as below:

<p id="texttocopy"> 
Write text to be copied over here. You can include HTML entities too.
</p>
<button onclick="copyToClipboard('#texttocopy')">Copy to clipboard</button>

That’s it and you’re done 🙂