Copy Text on Click
Suppose you want to make an element copyable by simply clicking on it. Here are some brief instructions.
Step 1
First, add the JS Notify library so we can show a notification when something is copied.
Header:
link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/styles/metro/notify-metro.min.css" integrity="sha512-PlmS4kms+fh6ewjUlXryYw0t4gfyUBrab9UB0vqOojV26QKvUT9FqBJTRReoIZ7fO8p0W/U9WFSI4MAdI1Zm+A==" crossorigin="anonymous" />
Footer:
<script src="https://cdnjs.cloudflare.com/ajax/libs/notify/0.4.2/notify.min.js" integrity="sha512-efUTj3HdSPwWJ9gjfGR71X9cvsrthIA78/Fvd/IN+fttQVy7XWkOAXb295j8B3cmm/kFKVxjiNYzKw9IQJHIuQ==" crossorigin="anonymous"></script>
Step 2
Now you will need to go to the page you would like to implement this customization.
JavaScript tab:
var flag = false;
function checkFlag() {
if (flag === false) {
if ($('.copyabletext').html() !== undefined || i > 30) {
flag = true;
}
window.setTimeout(checkFlag, 100);
} else {
var elements = document.getElementsByClassName("copyabletext");
var myFunction = function() {
console.log("Clicked");
navigator.clipboard.writeText(this.innerText)
$.notify("Copied to clipboard", "success");
};
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', myFunction, false);
}
}
}
checkFlag();
CSS Tab:
.copyabletext {
cursor: copy;
}
Step 3
Now any field that we add the CSS Class of copyabletext
will be copyable.
Original Community Post:
Copy Text on Click - Community Discussions / Tips and Tricks - Tadabase Community