jQuery或jQuery- ui是否有任何功能禁用给定文档元素的文本选择?
当前回答
我认为这段代码可以在所有浏览器上运行,所需的开销最少。它实际上是上述所有答案的混合体。如果你发现了窃听器,请告诉我!
添加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;}
添加jQuery:
(function($){
$.fn.disableSelection = function()
{
$(this).addClass('no_select');
if($.browser.msie)
{
$(this).attr('unselectable', 'on').on('selectstart', false);
}
return this;
};
})(jQuery);
可选:要禁用所有子元素的选择,您可以将IE块更改为:
$(this).each(function() {
$(this).attr('unselectable','on')
.bind('selectstart',function(){ return false; });
});
用法:
$('.someclasshere').disableSelection();
其他回答
如果你使用jQuery UI,有一个方法,但它只能处理鼠标选择(即CTRL+ a仍然有效):
$('.your-element').disableSelection(); // deprecated in jQuery UI 1.9
代码非常简单,如果你不想使用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; });
以下将禁用所有常见浏览器(IE, Chrome, Mozilla, Opera和Safari)中所有类的“item”的选择:
$(".item")
.attr('unselectable', 'on')
.css({
'user-select': 'none',
'MozUserSelect': 'none'
})
.on('selectstart', false)
.on('mousedown', false);
我认为这段代码可以在所有浏览器上运行,所需的开销最少。它实际上是上述所有答案的混合体。如果你发现了窃听器,请告诉我!
添加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;}
添加jQuery:
(function($){
$.fn.disableSelection = function()
{
$(this).addClass('no_select');
if($.browser.msie)
{
$(this).attr('unselectable', 'on').on('selectstart', false);
}
return this;
};
})(jQuery);
可选:要禁用所有子元素的选择,您可以将IE块更改为:
$(this).each(function() {
$(this).attr('unselectable','on')
.bind('selectstart',function(){ return false; });
});
用法:
$('.someclasshere').disableSelection();
在适当的情况下,一种解决方案是对您不想选择的文本使用<按钮>。如果你在某个文本块上绑定到click事件,并且不希望该文本是可选择的,那么将其更改为按钮将改善语义,也会阻止文本被选择。
<button>Text Here</button>
在jQuery 1.8中,可以这样做:
(function($){
$.fn.disableSelection = function() {
return this
.attr('unselectable', 'on')
.css('user-select', 'none')
.on('selectstart', false);
};
})(jQuery);