Introduction: Putting a Copy to Clipboard Button on a Webpage
Step 1: Get Your Html Doc First, to Fiddle Around
After you create your text file and after you rename it to "copy.html" and after you open it in Visual Studio, or Notepad++, or whatever, ...... ohhhhh. Wait.
You know, instead of walking you through, step by step, like I usually do, explaining basic things over and over ....... I don't have much time, I think I'll have you blindly shove the code into the file.
It's my code.
I developed it. I won't have you profit over my work. Yeah, I know, I usually do, but this time I won't.
Step 2: Add References
Since we are going to be using Jquery and this (really) cool thing-a-boo called "Balloon.css", we must add references first to the top of the file.
bla bla bla: BLAAAAAAA!!!!
Now remove that and put:
<script src="https://cortanabatch.zohosites.com/files/cdn/lib/jQuery/jQuery.min.js" async></script> <link rel="stylesheet" href="https://cortanabatch.zohosites.com/files/cdn/lib/Balloon.css/Balloon.css" />
Step 3: Code
Below that, add this code.
oh, no, just get the code from here: http://bit.ly/2t7Dwj7
Copy/paste the code to your file, under the references.
Step 4: Changing That Code to Suit Our - I Mean Your Needs
- On line-10, remove the input element.
- Now get the input element that you are trying to get to copy to clipboard. Set the id to "link" and set the class to "js-copytextarea" Just do it.
- Count all the buttons on your web page you will eventually add the code to.
- Remember that number. Now on line 23, 26 and 27, change the  to 
- OPTIONAL: on line 13 change Copied To Clipboard to Copy
You are done! be sure to check out the demo.
P.S. Did you like (no - love) the styles I put on the button?