chris barr

Photo/Dev/Design

Disable Text Selection With jQuery

I was recently working on an interface where there would be a log of dragging, scrolling and clicking – an unfortunate side effect of these type of things is that the user may sometimes unintentionally select text. Which this doesn’t break anything, it just looks bad can ruin the smooth experience you are trying to present the user with. It turns out that every browser has either some kind of hidden CSS or javascript function to prevent text selection.

I searched around and eventually came across this page on James Dempster’s site. He wrote a simple jQuery plugin to turn off text selection only for the elements you specify. His plugin works just fine, but I believe it can be simplified. Below is my version.

$(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'
});

After you include jQuery on your page, just include this script and any element with a class of noSelect will not be able to have it’s text highlighted — easy! (Obviously you can change the class name to be whatever you want though.)

Do take note that the plugin is contained within the $(document).ready(function(){/*your code here*/}); (which can also be written as $(function(){/*your code here*/}).) That just sets it up as a method to be called. To call the method and disable text selection you just get a standard jQuery element and add the method onto it : $('.noSelect').disableTextSelect();