How to Create Copy to Clipboard Using JavaScript ?

By using this JavaScript, we will make it easy for the user to copy the text. For this we will create a button which with one click will copy all url
How to Create Copy to Clipboard Using JavaScript

Have you ever noticed on a website page that there is a copy text or url attribute to the clipboard? This feature is very helpful for users or visitors to copy text or URL from website post, so users need not copy text or URL manually.

By using this JavaScript, we will make it easy for the user to copy the text. For this we will create a button which with one click will copy all url or text in specified form and of course with the help of javascript.

Do you intend to add copy text or URL to clipboard feature on your website? If yes then you are right to read this article because in this article we will learn how to create a copy text to clipboard using JavaScript.

What is Copy to Clipboard Feature ?

The Copy to Clipboard feature is a feature that makes it easy for users to copy text in HTML form. With this feature, users don't have to bother to block the text they want to copy first, then right-click and choose copy or use the ctrl+c combination keys to copy the text.


How to Create Copy to Clipboard Using JavaScript :-

To create this We first created an input whose value of https://www.example.com and gave it as copyinput id. Then we created an onclick button to copy the text so that it could copy the value of the input to https://www.example.com.

Html Code :-

<input type="text" value="https://www.example.com" id="copyinput"/>
<button onclick="copyText()">Copy Text</button>

JavaScript Code :-

<script type="text/javascript">
//<![CDATA[
/* Copy To Clipboard JavaScript Code By SmartTechMukesh.Com */
 function copyText() {
   var copyText = document.getElementById("copyinput");
   /* text selecter */
   copyText.select();
   /* text select number of range */
  copyText.setSelectionRange(0, 9999)
  /* copy text command */
   document.execCommand("copy");
  /* copy alert notification */
  alert("Copied Text : " + copyText.value);
}
//]]>
</script>

copyText() Copy Button onclick Event.

copyText.select(); Input Text Selecter.

copyText.setSelectionRange(0, 9999) Copy Text Selection Range Like 9999.

document.execCommand("copy"); Required Copy To Clipboard Command.

alert("Copied Text : " + copyText.value); Copy Alert Notification With Text Value.


Conclusion :-

It's a simple way to create the copy to clipboard using javascript that you can use in any of your web design projects. You can use this code anywhere on blogger.com or any other platform like WordPress.

In this post, I shared how to create copy to clipboard using JavaScript. I hope this method of create copy to clipboard using JavaScript can be very useful for you and your blog. Thank you for visiting our website.

Refrence :
Www.SmartTechMukesh.Com

About the Author

Hello Friends, My Name is John M Smith and Welcome To Our Website. My Passion is to Share Knowledge With Everyone. Also I am a Website Designer.

Buy me a Coffee

Post a Comment

Leave your opinion or any doubt about this article. Don't try to spam, our team reviews every comment.