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

Question

我正在制作一个 HTML/CSS/jQuery 画廊，有几个页面。

我确实有一个“下一步”按钮，它是一个带有 jQ​​uery 单击侦听器的简单链接。

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

所以这是我的问题：你能禁用 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 月更新：

根据我可以使用，目前，除 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 开发者网络文档。

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

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