Click to copy content by javascript

Click to copy content by javascript

Sometimes we need to add a function to copy content automatically.
Suppose you want to copy a big content or code by clicking a “Click to copy” or something like this indicator.

Here is the solution.
Please follow the steps as shown below.

Step 01: link this by pasting in the HTML tag.

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

Step 02: Paste this JavaScript before closing </body> tag.

<script>
	  var btns = document.querySelectorAll('.copy');
	  var clipboard = new ClipboardJS(btns);

	  clipboard.on('success', function (e) {
		  console.log(e);
	  });

	  clipboard.on('error', function (e) {
		  console.log(e);
	  });
</script>

In line 1, the CSS class .copy is the class that will work as an indicator. You have to add this class for the clicked element.

Now your website is ready to copy content anywhere.

<span class="copy" data-clipboard-target="#content">©</span>
<pre id="content">Text need to copy</pre>

Here the “data-clipboard-target” This is the showing the CSS ID name. It will find this ID, in this case CSS ID is “content”

Note: this plugin can help you add code in the head or body “Simple Custom CSS and JS“.

25 Comments

  1. Your blog is a true gem in the world of online content. I’m continually impressed by the depth of your research and the clarity of your writing. Thank you for sharing your wisdom with us.

  2. My brother suggested I might like this website He was totally right This post actually made my day You cannt imagine just how much time I had spent for this information Thanks

  3. I just wanted to drop by and say how much I appreciate your blog. Your writing style is both engaging and informative, making it a pleasure to read. Looking forward to your future posts!

  4. German: “Klasse Artikel! Die Infos waren echt nützlich und informativ. Es ist immer schön, auf so gründlich recherchierte Inhalte zu stoßen. Weiter so! Ich freue mich auf weitere Beiträge von dir.”English: “Fantastic article! The information was really useful and informative. It’s always nice to come across such thoroughly researched content. Keep it up! I’m looking forward to more posts from you.”

  5. “Thank you for addressing such an important topic with clarity and authority. The information shared here is timely and relevant, and I appreciate the effort put into providing actionable advice. Looking forward to reading more from this blog!”

  6. “Thank you for addressing such an important topic with clarity and authority. The information shared here is timely and relevant, and I appreciate the effort put into providing actionable advice. Looking forward to reading more from this blog!”

  7. Hi i think that i saw you visited my web site thus i came to Return the favore Im attempting to find things to enhance my siteI suppose its ok to use a few of your ideas

  8. This article was a fantastic read! I appreciate the depth of information and the clear, concise way it was presented. It’s evident that a lot of research and expertise went into crafting this post, and it really shines through in the quality of the content. I particularly found the first and last sections to be incredibly insightful. It sparked a few thoughts and questions I’d love to explore further. Could you elaborate more on next time? Also, if you have any recommended resources for further reading on this topic, I’d be grateful. Thanks for sharing your knowledge and contributing to a deeper understanding of this subject! I dedicated time to make a comment on this post immidiately after reading it, keep up the good work and i will be checking back again for more update. i appreciate the effort to write such a fantastic piece.

  9. This piece was incredibly enlightening! The level of detail and clarity in the information provided was truly captivating. The extensive research and deep expertise evident in this article are truly impressive, greatly enhancing its overall quality. The insights offered at both the beginning and end were particularly striking, sparking numerous new ideas and questions for further exploration.The way complex topics were broken down into easily understandable segments was highly engaging. The logical flow of information kept me thoroughly engaged from start to finish, making it easy to immerse myself in the subject matter. Should there be any additional resources or further reading on this topic, I would love to explore them. The knowledge shared here has significantly broadened my understanding and ignited my curiosity for more. I felt compelled to express my appreciation immediately after reading due to the exceptional quality of this article. Your dedication to crafting such outstanding content is highly appreciated, and I eagerly await future updates. Please continue with your excellent work—I will definitely be returning for more insights. Thank you for your unwavering commitment to sharing your expertise and for greatly enriching our understanding of this subject.

  10. I have been surfing online more than 3 hours today yet I never found any interesting article like yours It is pretty worth enough for me In my opinion if all web owners and bloggers made good content as you did the web will be much more useful than ever before especially for those of us looking to increase traffic

  11. What i dont understood is in reality how youre now not really a lot more smartlyfavored than you might be now Youre very intelligent You understand therefore significantly in terms of this topic produced me personally believe it from a lot of numerous angles Its like women and men are not interested except it is one thing to accomplish with Woman gaga Your own stuffs outstanding Always care for it up

  12. This article? It’s got some interesting ideas, definitely. You’ve touched on a few good points, but it feels like there’s more to explore. Digging a bit deeper next time could really add value. On the plus side, you are thinking outside the box, which is great. Your writing style gets the point across, but it could use a bit more energy. The examples are decent, but adding some spice wouldn’t hurt. I’m not saying it’s bad, just that there’s room for improvement. Consider tightening up your arguments and including more compelling facts. You’ve got potential. Keep pushing yourself, and your next piece could be truly impressive. Keep at it! Your next article might just blow me away. Or maybe not. We’ll see.

  13. Its like you read my mind You appear to know a lot about this like you wrote the book in it or something I think that you could do with some pics to drive the message home a little bit but instead of that this is fantastic blog An excellent read I will certainly be back

  14. Somebody essentially help to make significantly articles Id state This is the first time I frequented your web page and up to now I surprised with the research you made to make this actual post incredible Fantastic job

  15. Client Testimonials – Don’t just take our word for it. Hear from our satisfied clients who have experienced the Aspax Construction difference. Check out our testimonials to see why we’re the preferred choice for A-frame houses in Kenya.

  16. Hi my family member I want to say that this post is awesome nice written and come with approximately all significant infos I would like to peer extra posts like this

  17. The University of Virginia began in 1819, thanks to Thomas Jefferson, the third U.S. President. He saw UVA as a new way to teach people, make leaders, and informed citizens. Even today, UVA maintains its high standard, making it one of the top public schools in the U.S.

  18. Your writing is not only informative but also incredibly inspiring. You have a knack for sparking curiosity and encouraging critical thinking. Thank you for being such a positive influence!

  19. Hi i think that i saw you visited my web site thus i came to Return the favore Im attempting to find things to enhance my siteI suppose its ok to use a few of your ideas

Leave a Reply

Your email address will not be published. Required fields are marked *