Select & Copy Text to Clipboard Using jQuery

Today I have selected another topic by the suggestion of one of my friend and this topic is about select and copy text to 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 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 code is a selector on which this CSS style will be applied.

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

We are going to create an function and you can run this function on any jQuery events. 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 copy to clipboard then you can change the selectors.

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

If you want to add this functionality in 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 </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 like I have used in the above code.

Conclusion:

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

I hope you will like this article and please do share this article with your friends who are programming lovers.

If you want any help please leave your comments in the comment section this comment section is for your comments only. And please do fill the comment section with your lovely comments don't leave it blank. NOW HANG OUT!