Copy Text on Click

Please note that this is now available as a plugin for easier installation. While you can use this document as a reference, the recommended method to add this functionality is through the plugin installation wizard. Learn more about plugins here. 

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