防止文本表高亮显示

我有一张桌子,我允许用户'选择'多行。 这一切都使用jQuery事件和一些CSS来处理,以直观地指示该行是“被选中”的。 当用户按下shift键时,可以选择多行。 有时这会导致文字突出显示。 无论如何要防止这一点?


有一个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;
}

如果你想在你的用户可以选择或不选择你的网站时控制,你可以使用这个小小的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;
}

关于上面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;
    }
});

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

链接地址: http://www.djcxy.com/p/41407.html

上一篇: Prevent Highlight of Text Table

下一篇: How to stop event bubbling on checkbox click