jQuery或jQuery- ui是否有任何功能禁用给定文档元素的文本选择?
当前回答
这可以很容易地完成使用JavaScript这是适用于所有浏览器
<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>
调用此函数
<script type="text/javascript">
disableSelection(document.body)
</script>
其他回答
我发现这个答案(防止文本表高亮显示)最有帮助,也许它可以与提供IE兼容性的另一种方式结合起来。
#yourTable
{
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
这可以很容易地完成使用JavaScript这是适用于所有浏览器
<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>
调用此函数
<script type="text/javascript">
disableSelection(document.body)
</script>
这里有一个更全面的解决方案来断开选择,并取消一些热键(如Ctrl+a和Ctrl+c)。测试:Cmd+a和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);
并调用示例:
$(':not(input,select,textarea)').disableSelection();
jsfiddle.net/JBxnQ/
这对于旧版本的FireFox来说可能也不够(我不知道是哪个)。如果所有这些都不起作用,请添加以下内容:
.on('mousedown', false)
在jQuery 1.8中,可以这样做:
(function($){
$.fn.disableSelection = function() {
return this
.attr('unselectable', 'on')
.css('user-select', 'none')
.on('selectstart', false);
};
})(jQuery);
以下将禁用所有常见浏览器(IE, Chrome, Mozilla, Opera和Safari)中所有类的“item”的选择:
$(".item")
.attr('unselectable', 'on')
.css({
'user-select': 'none',
'MozUserSelect': 'none'
})
.on('selectstart', false)
.on('mousedown', false);