如何使用jQuery禁用文本选择？

jQuery或jQuery-UI是否具有禁用给定文档元素的文本选择的任何功能？

在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();

jsfiddle.net/JBxnQ/

这对于旧版本的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);

        $(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");
        });

这可以使用JavaScript轻松完成.这适用于所有浏览器

调用此功能

这其实很简单.要禁用文本选择(还单击+拖动文本(例如Chrome中的链接)),只需使用以下jQuery代码:

$('body, html').mousedown(function(event) {
    event.preventDefault();
});

所有这一切都是为了防止mousedown()在body和html标签中单击鼠标()时发生默认设置.你可以很容易只是通过改变文本之间的两个引号(如改变而改变的元素$('body, html'),以$('#myUnselectableDiv')使myUnselectableDivDIV是,好了,不可选.

一个快速的片段向您展示/证明:

$('#no-select').mousedown(function(event) {
  event.preventDefault();
});

I bet you can't select this text, or drag this link, 

but that you can select this text, and drag this link!