防止文本表突出显示答案

【问题标题】：Prevent Highlight of Text Table防止文本表突出显示
【发布时间】：2009-08-23 17:49:13
【问题描述】：

我有一个表格，我允许用户“选择”多行。这一切都是使用 jQuery 事件和一些 CSS 来处理的，以直观地指示该行被“选中”。当用户按下 shift 时，可以选择多行。有时这会导致文本突出显示。有没有办法防止这种情况发生？

【问题讨论】：

CSS rule to disable text selection highlighting 的可能重复项

【解决方案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;
}

【讨论】：

太糟糕了 Internet Explorer 不在乎。在 6-8 测试。
@NathanTaylor 谷歌搜索后，您会发现已解决此问题的重复项：stackoverflow.com/questions/826782/…
Validation (CSS 3.0): "moz-none" is not a valid value for the "-moz-user-select" property. 事实上，在我将 moz-none 更改为 none 之前，这对 Firefox 不起作用。

【解决方案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;
}

【讨论】：

【解决方案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;
    }
});

干杯，希望这有帮助。

【讨论】：

他用“return this.each(function() {...”来做到这一点

【解决方案4】：

我只是删除了使用 shift 键所做的选择。不过，这可能会显示一些闪烁

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

【讨论】：

【解决方案5】：

您可以在所选文本上尝试使用 focus() 函数 - 选择消失。

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

【讨论】：

【解决方案6】：

如果您的页面上有 Jquery UI，只需使用

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

【讨论】：

这是无证的，但如果你有 jQuery UI 核心应该可以工作
这个解决方案的好处是它也适用于 IE，如果您查看代码，它可以复制已经提到的解决方案的功能。
请注意，在 jQuery UI 1.9 中不推荐使用 disableSelection()

【解决方案7】：

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

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

来自http://www.w3schools.com/cssref/sel_selection.asp
实际上是在更改值之后从尝试部分开始的。
请注意，虽然光标仍然是“I”形...

【讨论】：

注意：::selection 伪元素是为 CSS 选择器级别 3 起草的，但在推荐状态之前被删除。因此，目前， ::selection 伪元素不在任何规范中。（但是，它可能会重新添加到未来的 CSS 规范中。）