This is a simple JavaScript script that allows you to enable click-to-copy functionality on any HTML element. It's a handy utility for providing users with an easy way to copy predefined text snippets.
-
Include the necessary HTML and JavaScript files in your project.
-
Add HTML elements with the class
click-to-copy
(or any class name you prefer) to your HTML file. Include thedata-copy-text
attribute to specify the text to be copied.
Example:
<div class="click-to-copy" data-copy-text="Text to be copied">Copy</div>
<p class="click-to-copy" data-copy-text="Another text to be copied">Copy</p>
-
Include the provided JavaScript code in your project.
-
Customize the alert message to provide user feedback after copying.
With the click-to-copy
class (or your chosen class name), you can enable the click-to-copy functionality on any HTML element, expanding its usage beyond buttons and links.
Add tooltips for user clarity. Use the data-tooltip
attribute to include a tooltip when hovering over the elements.
Example:
<div class="click-to-copy" data-copy-text="Text to be copied" data-tooltip="Click to Copy">Copy</div>
Users can now click an element with the click-to-copy
class, and the selected text will be copied to the clipboard. An alert will confirm the successful copy action.
The script acknowledges that document.execCommand('copy')
might not work in all modern browsers due to security restrictions. Explore alternatives, such as the Clipboard API, if needed.
Visit the GitHub repository to access the latest release and start integrating click-to-copy functionality into your projects today!
This project is licensed under the MIT License.