Was helping someone with this and wanted to post here in case its helpful.
If you want to make an element copyable (real word?) by simply clicking on it. Here’s some brief instuctions.
First add the JS Notify library so we can show a notifcation when something is copied.
Header of the App:
<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>
Javascript:
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:
.copyabletext {
cursor: copy;
}
Next anything that has the CSS Class of copyabletext will be copyable.
For example, if there is a column in your table that you’d like the values to be easliy copied, simply add the class in the column settings:
