jQuery 或 jQuery-UI 是否具有禁用给定文档元素的文本选择的功能?
如何使用 jQuery 禁用文本选择?
IT技术
javascript
jquery
jquery-ui
2021-01-20 15:52:58
6个回答
在 jQuery 1.8 中,这可以按如下方式完成:
(function($){
$.fn.disableSelection = function() {
return this
.attr('unselectable', 'on')
.css('user-select', 'none')
.on('selectstart', false);
};
})(jQuery);
如果你使用 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 兼容性的另一种方式结合使用。
#yourTable
{
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
这里有一个更全面的解决方案断开选择,取消一些热键(如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();
对于旧版本的 FireFox(我不知道是哪个),这也可能不够。如果所有这些都不起作用,请添加以下内容:
.on('mousedown', false)
以下将禁用所有常见浏览器(IE、Chrome、Mozilla、Opera 和 Safari)中所有类“item”的选择:
$(".item")
.attr('unselectable', 'on')
.css({
'user-select': 'none',
'MozUserSelect': 'none'
})
.on('selectstart', false)
.on('mousedown', false);
其它你可能感兴趣的问题