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

如果您希望在用户可以选择或不选择部分网站时进行控制，则可以使用此little jQuery plugin。

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;
    }
});

干杯，希望这有帮助。

Answer 4

我只是删除了使用shift键进行的选择。这可能会显示一点点闪烁

if (event.shiftKey) {
    window.getSelection().removeAllRanges()
}

Answer 5

您可以尝试使用所选文本的focus（）函数 - 选择消失。

$('#someEl').focus();

Answer 6

如果您的网页上有Jquery UI，请使用

    $("element-selector").disableSelection();

Answer 7

::-moz-selection { /* Code for Firefox */  
    color: black;  
    background: none;
}

::selection {  
    color: black;  
    background: none;  
}

来自http://www.w3schools.com/cssref/sel_selection.asp的

实际上是从试试部分，在更改值之后请注意，光标仍然是'我'形状......

防止文本表的突出显示

7 个答案: