Disable double-click text selection in jQuery

Question

I have a jQuery switch. It works great.

<ul> <li>Go to the store</li> <li>Pick up dinner</li> <li>Debug crash</li> <li>Take a jog</li> </ul> 

  $("li").toggle( function () { $(this).css({"list-style-type":"disc", "color":"blue"}); }, function () { $(this).css({"list-style-type":"disc", "color":"red"}); }, function () { $(this).css({"list-style-type":"", "color":""}); } ); 

The problem is that when I make a quick click, it selects the text in it. Is there any way to stop text selection?

Answer 1

I write on the iPhone, far from the table, but Google quickly raised this page: disable text selection using jQuery .

---

Edited in response to a dead link comment (by @Herb Caudill). Although the original link is really dead, apparently related to the restructuring of the site (and not to the deletion), and a new place for the article can be found here: http://chris-barr.com/index.php/entry/disable_text_selection_with_jquery/

And the code given in this article is reproduced below:

 $(function(){ $.extend($.fn.disableTextSelect = function() { return this.each(function(){ if($.browser.mozilla){//Firefox $(this).css('MozUserSelect','none'); }else if($.browser.msie){//IE $(this).bind('selectstart',function(){return false;}); }else{//Opera, etc. $(this).mousedown(function(){return false;}); } }); }); $('.noSelect').disableTextSelect();//No text selection on elements with a class of 'noSelect' }); 

jQuery fragment, written by Chris Barr, chris-barr.com , accessed on Friday, 21 ^st January 2011.

Answer 2

If you are using jQuery UI, you can turn off text selection as easily:

 $("body").disableSelection(); 

Answer 3

I solved this using the custom CSS user-select keyword:

 .unselectable { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } 

Answer 4

 //function to be reused later function clearSelection() { var sel ; if(document.selection && document.selection.empty){ document.selection.empty() ; } else if(window.getSelection) { sel=window.getSelection(); if(sel && sel.removeAllRanges) sel.removeAllRanges() ; } } $('p').click(clearSelection); 

Source

Answer 5

I had the same problem and it worked for me:

 li.noselection::selection { background-color: transparent; } 

I tested it on Chrome, Firefox, EDGE and IE from 7 to 10.

PS This only disables the "visual effect", the text is still highlighted. I hope that’s why they voted for it, because if your problem is only aesthetic, this solution works 100%.

Answer 6

To work with jQuery version above 1.9.x

HTML

HTML markup as shown above:

 <ul> <li>Go to the store</li> <li>Pick up dinner</li> <li>Debug crash</li> <li>Take a jog</li> </ul> 

Js

Use the preventDefault () function instead of return false, which does not kill other handlers that might be

 $('li').on('selectstart', function (event) { event.preventDefault(); }); 

Example: jsFiddle

Answer 7

 window.getSelection().empty() 

works great in Chrome, albeit with a fast flash of highlight, which is ugly.

Answer 8

 $( 'selector' ).on( 'selectstart', 'selector', function( ) { return false; }).css( 'MozUserSelect','none' ).mousedown( function( ) { return false; }); 

replace the selector with your own - this code works fine in all browsers. Using .on () for elements dynamically inserted into the DOM

Answer 9

 document.onselectstart = function() { return false; } document.onmousedown = function() { return false; }