Disable Text Selection With jQuery
Saturday, February 07, 2009
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();
Comments
This was useful. Thanks for sharing!
Great idea and lightweight !
Thanks a lot for sharing !
Excellent solution - thanks a bunch for sharing. Works perfectly!
I’m building an on-screen keyboard for a client’s kiosk center, and this script really helps polish the UX by avoiding awkward text selection. Thanks a bunch!
Thanks for sharing! exactly what i needed.
just a note by using “live” instead of “bind” u dont have to rebind if u add elements after the code is executed
For portable code, you should use ‘jQuery’ instead of ‘$’ in case jQuery.noConflict is on.
Hi friend,
It isn’t working in Opera 10 , any solution please?
In the jQuery-ui core.js, it uses something similar, which I’ve found to be a slightly more reliable snippet of reusable code, in light of the Opera 10 comment just above. I try to avoid jQuery-ui as a full-blown library just for simple things like this, so having the snippet built into my own code is quite nice.
jQuery(this)
.attr(‘unselectable’, ‘on’)
.css(‘MozUserSelect’, ‘none’)
.bind(‘selectstart.ui’, function() {
return false;
});
Hey, this works great! Even better if you add the 9th post fix. But I have a question… I’m adding a lot of dynamic content to the page that must have noSelect class in order to not be selected, so each time the content changes, I must call the function to refresh the “selection prevention” and when I am having to much elements on the page, it stalls a little… But, if I enclose all of my content in a DIV and let it be noSelect, it is really fast, but <input> and <select> tags in that DIV become unusable… Can I somehow make certain elements inside noSelect DIV selectable? I tried to reverse your method, it works if I disable/enable the main DIV, but it doesn’t work on its child elements…
Well, selecting by a class name instead of an ID is always slower, so if it’s always one element or the same elements with predicable ID’s just use that instead.
That should make it a bit faster, but I’m not sure there’s an easy way to make it not disable form elements. All I can think of is that you could possibly select your element you want to disable, and disable everything inside it except for those elements instead of the element itself.
$(”#MyElement”).children(”:not(input,select)”). disableTextSelect();
That might work, but that also might slow things down again if the element has a lot of children.
I’ve made some very minor changes to improve it :-)
/**
* http://chris-barr.com/entry/disable_text_selection_with_jquery/
* modified to be “$” safe by Dakkar Daemor [www.imaginific.com]
*/
(function($) {
$.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;});
}
});
}
$(function($){
$(’.noSelect’).disableTextSelect();//No text selection on elements with a class of ‘noSelect’
});
})(jQuery);
Useful. Thanks.
Very useful, thanks. Most of our users would like the same dbl click functionality as found in Windows, and quite often when the text is highlighted in a table row, it looks messy and dated.
P E R F E C T - thanx!!!! =))))
Awesome plugin. Thanks!