防止文本表格的高亮显示

Question

我有一个表格，允许用户“选择”多行。这一切都是使用jQuery事件处理和一些CSS视觉指示当前行已被“选择”。当用户按下shift键时，可以选择多个行。有时这会导致文本变为高亮显示。是否有任何方法可以防止这种情况发生？

- mikeycgto

---

可能是禁用文本选择高亮的CSS规则的重复问题。 - Dan

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

- Eli Grey

---

很遗憾，Internet Explorer不在意。在6-8版本中进行过测试。 - Nathan Taylor

@NathanTaylor 在谷歌上搜索后，你会发现有一个重复问题已经被解决了: https://dev59.com/pnRA5IYBdhLWcg3wyRF6 - Dan

验证（CSS 3.0）：“moz-none”不是“-moz-user-select”属性的有效值。实际上，在我将“moz-none”更改为“none”之前，这在Firefox中无法正常工作。 - Nolonar

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

- Cleiton

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

祝你好运，希望这对你有所帮助。

- Steven

---

他使用 "return this.each(function() {..." 来实现这个功能。 - frontendbeauty

Answer 4

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

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

- ckuijjer

Answer 5

你可以尝试使用focus()函数来选中文本 - 选择将会消失。

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

- gregor

Answer 6

如果您的页面上有Jquery UI，请使用以下代码：

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

- Shadrack Orina

---

这并没有文档记录，但如果您有jQuery UI核心，应该可以运行。 - Shadrack Orina

这个解决方案的好处是它也适用于IE，并且如果您查看代码，可以复制已经提到的解决方案的功能。 - sksallaj

请注意，disableSelection()在jQuery UI 1.9中已被弃用。 - mar10

Answer 7

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

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

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

- yuval klein

---

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