如何禁用CSS或JavaScript文本选择？

Question

可能重复:
禁用文本选择突出显示的CSS规则

我正在制作一个包含多个页面的HTML/CSS/jQuery库.

我确实有一个"下一步"按钮,这是一个与jQuery点击监听器的简单链接.

问题是,如果用户多次单击该按钮,则选择该按钮的文本,然后选择整行文本.在我真正的黑暗设计中,这真的是丑陋而荒谬的.

所以这是我的问题:您可以禁用HTML上的文本选择吗？如果没有,我会非常怀念flash及其在文本字段上的高级配置......

Answer 1

<div 
 style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;" 
 unselectable="on"
 onselectstart="return false;" 
 onmousedown="return false;">
    Blabla
</div>

Answer 2

更新2017年1月:

根据我可以使用,user-select除了Internet Explorer 9和早期版本之外,所有浏览器目前都支持(但遗憾的是仍然需要供应商前缀).

所有正确的CSS变体都是:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

请注意,它是非标准功能(即不是任何规范的一部分).它不能保证在任何地方都可以工作,并且浏览器之间的实现可能存在差异,并且在将来的浏览器中可能会失去对它的支持.

可以在Mozilla Developer Network文档中找到更多信息.

Answer 3

试试这个CSS代码以实现跨浏览器兼容性.

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

Answer 4

您可以使用JavaScript来执行您想要的操作:

if (document.addEventListener !== undefined) {
  // Not IE
  document.addEventListener('click', checkSelection, false);
} else {
  // IE
  document.attachEvent('onclick', checkSelection);
}

function checkSelection() {
    var sel = {};
    if (window.getSelection) {
        // Mozilla
        sel = window.getSelection();
    } else if (document.selection) {
        // IE
        sel = document.selection.createRange();
    }

    // Mozilla
    if (sel.rangeCount) {
        sel.removeAllRanges();
        return;
    }

    // IE
    if (sel.text > '') {
        document.selection.empty();
        return;
    }
}

肥皂盒: 你真的不应该以这种方式搞砸客户的用户代理.如果客户想要在文档上选择内容,那么他​​们应该能够在文档上选择内容.如果您不喜欢高亮颜色并不重要,因为您不是查看文档的人.

Answer 5

我不确定是否可以将其关闭，但是可以更改其颜色:)

myDiv::selection,
myDiv::-moz-selection,
myDiv::-webkit-selection {
    background:#000;
    color:#fff;
}

然后将颜色匹配到您的“深色”设计，看看会发生什么:)