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" />

<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();