Does jQuery or jQuery-UI have any functionality to disable text selection for given document elements?
-
3Possible duplicate: stackoverflow.com/questions/1319126/prevent-highlight-of-text– Jørn Schou-RodeApr 23, 2010 at 15:57
-
@John: Does the link above answer your question? If it does not, you might want to throw in some more detail as to how your situation is different.– Jørn Schou-RodeApr 23, 2010 at 15:59
-
1Yes it does. But although the answer is the same, that question is very specific so many can miss that answer having in mind more general question (as I did).– Dawid OhiaApr 23, 2010 at 16:09
-
@Jhon: The other question has a jQuery solution too.– Omar AbidApr 23, 2010 at 16:34
13 Answers
In jQuery 1.8, this can be done as follows:
(function($){
$.fn.disableSelection = function() {
return this
.attr('unselectable', 'on')
.css('user-select', 'none')
.on('selectstart', false);
};
})(jQuery);
-
1The JavaScript alternative works only for IE. "onselectstart" is not available for other browsers Apr 23, 2010 at 16:32
-
13
-
2@Bryce: Just don't. blog.slaks.net/2010/12/on-copy-prevention-in-html-part-2.html blog.slaks.net/2010/12/on-copy-prevention-in-html-part-3.html– SLaksFeb 8, 2011 at 12:55
-
12Thanks for this. I was working on a dragging slider and needed a way that text wouldn't be selected in the process. Nov 14, 2011 at 6:11
-
38To those of you who say "just don't" to disabling text selection (or anything else on SO for that matter), open thy minds just a bit. Often times people disable it for aesthetic reasons such as avoiding text selection on a double click of a label with text in it, etc. So either answer the question, or provide an actual counter point and specify what you're talking about negating, don't just scratch the idea out in a general manner.– dudewadNov 3, 2013 at 20:21
If you use jQuery UI, there is a method for that, but it can only handle mouse selection (i.e. CTRL+A is still working):
$('.your-element').disableSelection(); // deprecated in jQuery UI 1.9
The code is realy simple, if you don't want to use jQuery UI :
$(el).attr('unselectable','on')
.css({'-moz-user-select':'-moz-none',
'-moz-user-select':'none',
'-o-user-select':'none',
'-khtml-user-select':'none', /* you could also put this in a class */
'-webkit-user-select':'none',/* and add the CSS class here instead */
'-ms-user-select':'none',
'user-select':'none'
}).bind('selectstart', function(){ return false; });
-
1the jquery ui function would be great, but it doesn't offer the same level of protection, it does prevent selecting things directly, but if you're carrying a selection from another dom object, you need the css rules too - heres the function = function () { return this.bind( ( $.support.selectstart ? "selectstart" : "mousedown" ) + ".ui-disableSelection", function( event ) { event.preventDefault(); }); } Aug 4, 2011 at 19:21
-
2
-
It could also require .on('mousedown', false) to work, depending on your browser. Hovewer, it's dangerous to kill mousedown events on by default because this could probably brake existing functionality– DanJul 18, 2013 at 11:59
-
1Arg. It's annoying it's been depreciated. There's plenty of time when you want this legitimately. Aug 6, 2013 at 16:19
-
I'm creating a right-click context menu on some anchor text, and I don't want the text to select on click. So yes, @Monk, this would qualify as a legitimate example. Jun 25, 2014 at 21:03
I found this answer ( Prevent Highlight of Text Table ) most helpful, and perhaps it can be combined with another way of providing IE compatibility.
#yourTable
{
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
-
-
3Always appreciate the CSS way to do things instead of using jQuery or JS in general. Just like jQuery animations vs CSS transitions, the way built into the browser is always going to be the best and most efficient. Mar 27, 2015 at 18:29
Here's a more comprehensive solution to the disconnect selection, and the cancellation of some of the hot keys (such as Ctrl+a and Ctrl+c. Test: Cmd+a and Cmd+c)
(function($){
$.fn.ctrlCmd = function(key) {
var allowDefault = true;
if (!$.isArray(key)) {
key = [key];
}
return this.keydown(function(e) {
for (var i = 0, l = key.length; i < l; i++) {
if(e.keyCode === key[i].toUpperCase().charCodeAt(0) && e.metaKey) {
allowDefault = false;
}
};
return allowDefault;
});
};
$.fn.disableSelection = function() {
this.ctrlCmd(['a', 'c']);
return this.attr('unselectable', 'on')
.css({'-moz-user-select':'-moz-none',
'-moz-user-select':'none',
'-o-user-select':'none',
'-khtml-user-select':'none',
'-webkit-user-select':'none',
'-ms-user-select':'none',
'user-select':'none'})
.bind('selectstart', false);
};
})(jQuery);
and call example:
$(':not(input,select,textarea)').disableSelection();
This could be also not enough for old versions of FireFox (I can't tell which). If all this does not work, add the following:
.on('mousedown', false)
-
3Why do you call
attr('unselectable', 'on')
twice? Is it a typo or is it useful? Feb 2, 2012 at 7:30 -
This worked great for me, but I had to disable the ".each(function() { $(this).attr('unselectable','on') .bind('selectstart',function(){ return false; }); });" section for my particular web app (JQuery Mobile), just in case it helps anyone..– AnthonyApr 25, 2013 at 19:54
The following would disable the selection of all classes 'item' in all common browsers (IE, Chrome, Mozilla, Opera and Safari):
$(".item")
.attr('unselectable', 'on')
.css({
'user-select': 'none',
'MozUserSelect': 'none'
})
.on('selectstart', false)
.on('mousedown', false);
-
1Not complicated - Excellent! Thank you. For disabled looking; I addded .attr('disabled', 'disabled')– freewillSep 10, 2014 at 15:05
-
Update: instead of .attr('disabled', 'disabled'), I used .attr('readonly', 'readonly'). Disabled prevents posting my model variable in MVC(model variable is null). Readonly still have disabled looking(I use bootstrap) and it allows posting the item value– freewillSep 11, 2014 at 13:59
-
Excellent bro, i using this code to replace "pointer-events: none;", that not work in IE 11. regards Oct 9, 2018 at 12:56
$(document).ready(function(){
$("body").css("-webkit-user-select","none");
$("body").css("-moz-user-select","none");
$("body").css("-ms-user-select","none");
$("body").css("-o-user-select","none");
$("body").css("user-select","none");
});
-
Could you write a brief summary of the answer in addition to the code?– jonscaSep 24, 2012 at 12:31
This is actually very simple. To disable text selection (and also click+drag-ing text (e.g a link in Chrome)), just use the following jQuery code:
$('body, html').mousedown(function(event) {
event.preventDefault();
});
All this does is prevent the default from happening when you click with your mouse (mousedown()
) in the body
and html
tags. You can very easily change the element just by changing the text in-between the two quotes (e.g change $('body, html')
to $('#myUnselectableDiv')
to make the myUnselectableDiv
div to be, well, unselectable.
A quick snippet to show/prove this to you:
$('#no-select').mousedown(function(event) {
event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="no-select">I bet you can't select this text, or drag <a href="#">this link</a>, </span>
<br/><span>but that you can select this text, and drag <a href="#">this link</a>!</span>
Please note that this effect is not perfect, and performs the best while making the whole window not selectable. You might also want to add
the cancellation of some of the hot keys (such as Ctrl+a and Ctrl+c. Test: Cmd+a and Cmd+c)
as well, by using that section of Vladimir's answer above. (get to his post here)
This can easily be done using JavaScript This is applicable to all Browsers
<script type="text/javascript">
/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //For IE
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //For Firefox
target.style.MozUserSelect="none"
else //All other route (For Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
</script>
Call to this function
<script type="text/javascript">
disableSelection(document.body)
</script>
-
-
3
I've tried all the approaches, and this one is the simplest for me because I'm using IWebBrowser2 and don't have 10 browsers to contend with:
document.onselectstart = new Function('return false;');
Works perfectly for me!
1 line solution for CHROME:
body.style.webkitUserSelect = "none";
and FF:
body.style.MozUserSelect = "none";
IE requires setting the "unselectable" attribute (details on bottom).
I tested this in Chrome and it works. This property is inherited so setting it on the body element will disable selection in your entire document.
Details here: http://help.dottoro.com/ljrlukea.php
If you're using Closure, just call this function:
goog.style.setUnselectable(myElement, true);
It handles all browsers transparently.
The non-IE browsers are handled like this:
goog.style.unselectableStyle_ =
goog.userAgent.GECKO ? 'MozUserSelect' :
goog.userAgent.WEBKIT ? 'WebkitUserSelect' :
null;
Defined here: http://closure-library.googlecode.com/svn/!svn/bc/4/trunk/closure/goog/docs/closure_goog_style_style.js.source.html
The IE portion is handled like this:
if (goog.userAgent.IE || goog.userAgent.OPERA) {
// Toggle the 'unselectable' attribute on the element and its descendants.
var value = unselectable ? 'on' : '';
el.setAttribute('unselectable', value);
if (descendants) {
for (var i = 0, descendant; descendant = descendants[i]; i++) {
descendant.setAttribute('unselectable', value);
}
}
I think this code works on all browsers and requires the least overhead. It's really a hybrid of all the above answers. Let me know if you find a bug!
Add CSS:
.no_select { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select:none;}
Add jQuery:
(function($){
$.fn.disableSelection = function()
{
$(this).addClass('no_select');
if($.browser.msie)
{
$(this).attr('unselectable', 'on').on('selectstart', false);
}
return this;
};
})(jQuery);
Optional: To disable selection for all children elements as well, you can change the IE block to:
$(this).each(function() {
$(this).attr('unselectable','on')
.bind('selectstart',function(){ return false; });
});
Usage:
$('.someclasshere').disableSelection();
One solution to this, for appropriate cases, is to use a <button>
for the text that you don't want to be selectable. If you are binding to the click
event on some text block, and don't want that text to be selectable, changing it to be a button will improve the semantics and also prevent the text being selected.
<button>Text Here</button>
Best and simplest way I found it, prevents ctrl + c, right click. In this case I blocked everything, so I don't have to specify anything.
$(document).bind("contextmenu cut copy",function(e){
e.preventDefault();
//alert('Copying is not allowed');
});