Select & Copy Text to Clipboard Using jQuery

Today I selected another topic at the suggestion of one of my friends and this topic is about selecting and copying text to a clipboard using jQuery. I will also use some CSS code that will help you to select text.

If you simply want to select the text then the CSS code provided below is necessary for that.

code {
    -webkit-user-select: all !important;
    -khtml-user-select: all !important;
    -moz-user-select: all !important;
    -ms-user-select: all !important;
    user-select: all !important;
}

In the above code is a selector on which this CSS style will be applied.

But if you want to copy text to the clipboard for that you have to use javascript or jQuery code.

We are going to create a function and you can run this function on any jQuery event. By default, the event is onclick but if you want to change the event and you don't have any knowledge about jQuery events please visit this link to know more.

If you want to add this select and copy text to clipboard functionality in your blogger blog or on your website then you can use the code provided below but if you want any other elements to be selected for a copy to clipboard then you can change the selectors.

So this is the simple jQuery function to select and copy text to the clipboard.

If you want to add this functionality to blogger then please follow these guidelines.

Steps to Follow:

1. Go to Blogger Dashboard
2. Go to Theme/Template Section
3. Click Edit HTML
4. Now Search for </body>

To search anything in blogger template section press Ctrl+F and then type term to search and press enter.

5. Now copy the code provided below and paste it after the </body> tag.

<style>
    code,
    pre {
        -webkit-user-select: all !important;
        -khtml-user-select: all !important;
        -moz-user-select: all !important;
        -ms-user-select: all !important;
        user-select: all !important;
    }
</style>
<script>
    //<![CDATA[
    jQuery.fn.selectText = function () {
        this.find("input").each(function () {
            if ($(this).prev().length == 0 || !$(this).prev().hasClass("p_copy")) {
                $('<p class="p_copy" style="position: absolute; z-index: -1;"></p>').insertBefore($(this));
            }
            $(this).prev().html($(this).val());
        });
        var doc = document;
        var element = this[0];
        console.log(this, element);
        if (doc.body.createTextRange) {
            var range = document.body.createTextRange();
            range.moveToElementText(element);
            range.select();
            document.execCommand("copy");
        } else if (window.getSelection) {
            var selection = window.getSelection();
            var range = document.createRange();
            range.selectNodeContents(element);
            selection.removeAllRanges();
            selection.addRange(range);
            document.execCommand("copy");
        }
    };
    $("pre, code").on("click", function (e) {
        var selector = $(this);
        $(selector).selectText();
        e.preventDefault();
        alert("Your Text is successfully copied to clipboard");
    }); //]]>
</script>

6. Save Theme/Template

You can replace or add more elements by changing the selector value in the above code. Selectors are highlighted.

You can also use multiple selectors as I have used in the above code.

Conclusion:

So now you have successfully added this functionality to your blogger blog you can also use the same code in your WordPress website now you can easily select and copy text to the clipboard using jQuery with onclick event.