Select & Copy Text to Clipboard Using jQuery

Select & Copy Text to Clipboard Using jQuery

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 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 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>
  5. To search anything in blogger template section press Ctrl+F and then type term to search and press enter.
  6. Now copy the code provided below and paste it after the </body> tag.
  7. <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>
  8. 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 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.

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!

1 Comments

Help us improve this article by leaving your feedback below.
  1. Admin
    Admin 1 Oct 2021, 19:24:00

    it gives three times pop up for code copied...it is the issue for everyone?

    Reply Delete
Add Comment
Previous Post Next Post