How to disable text selection using jQuery?
JavascriptJqueryJquery UiJavascript Problem Overview
Does jQuery or jQuery-UI have any functionality to disable text selection for given document elements?
Javascript Solutions
Solution 1 - Javascript
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);
Solution 2 - Javascript
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; });
Solution 3 - Javascript
I found this answer ( https://stackoverflow.com/questions/1319126/prevent-highlight-of-text/1319158#1319158 ) 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;
}
Solution 4 - Javascript
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)
Solution 5 - Javascript
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);
Solution 6 - Javascript
$(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");
});
Solution 7 - Javascript
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>
Solution 8 - Javascript
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)
Solution 9 - Javascript
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!
Solution 10 - Javascript
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);
}
}
Solution 11 - Javascript
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();
Solution 12 - Javascript
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>
Solution 13 - Javascript
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');
});