防止文本表的突出显示

Question

我有一张桌子,我允许用户"选择"多行.这都是使用jQuery事件和一些CSS来处理,以直观地指示行被"选中".当用户按下shift时,可以选择多行.有时这会导致文本突出显示.反正有没有阻止这个？

Answer 1

有一个CSS3属性.

#yourTable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Answer 2

如果您希望在用户可以选择或不选择部分网站时进行控制,则可以使用此小jQuery插件.

jQuery.fn.extend({ 
        disableSelection : function() { 
                return this.each(function() { 
                        this.onselectstart = function() { return false; }; 
                        this.unselectable = "on"; 
                        jQuery(this).css('user-select', 'none'); 
                        jQuery(this).css('-o-user-select', 'none'); 
                        jQuery(this).css('-moz-user-select', 'none'); 
                        jQuery(this).css('-khtml-user-select', 'none'); 
                        jQuery(this).css('-webkit-user-select', 'none'); 
                }); 
        } 
}); 

并将其用作:

// disable selection on #theDiv object
$('#theDiv').disableSelection(); 

否则,您可以在css文件中使用这些css属性:

#theDiv
 {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Answer 3

关于Cleiton上面答案的一个注释 - 代码示例似乎运行良好,但为了成为jQuery世界中的好公民,你应该在函数末尾返回jQuery对象,以便它可以链接 - 一个简单的单行添加修复了:

jQuery.fn.extend({
    disableSelection : function() {
            this.each(function() {
                    this.onselectstart = function() { return false; };
                    this.unselectable = "on";
                    jQuery(this).css('-moz-user-select', 'none');
            });
            return this;
    }
});

干杯,希望这是有帮助的.