293

我正在制作一个包含几页的 HTML/CSS/jQuery 画廊。

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

问题是如果用户点击按钮几次，按钮的文本被选中，然后是整行文本。在我真正黑暗的设计中，这真的很丑陋和荒谬。

所以这是我的问题：你能禁用 HTML 上的文本选择吗？如果没有，我会非常想念 Flash 及其在文本字段上的高级配置......

4

5 回答 5

341 
<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>
于 2010-09-23T14:44:02.143 回答
326

2017 年 1 月更新：

根据Can I use，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>

Note that it's a non-standard feature (i.e. not a part of any specification). It is not guaranteed to work everywhere, and there might be differences in implementation among browsers and in the future browsers can drop support for it.

More information can be found in Mozilla Developer Network documentation.

于 2012-02-16T15:53:18.957 回答
35

试试这个 CSS 代码以获得跨浏览器的兼容性。

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
于 2011-12-21T23:33:31.773 回答
8

你可以使用 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;
    }
}

肥皂盒： 您真的不应该以这种方式与客户端的用户代理搞混。如果客户想要选择文档上的东西，那么他们应该能够选择文档上的东西。如果您不喜欢突出显示的颜色也没关系，因为您不是查看文档的人。

于 2010-09-23T16:20:38.700 回答
6

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

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

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

于 2010-09-23T14:42:53.850 回答