如何禁用CSS或JavaScript的文字选择？

2018-05-29 07:45:08

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

我正在制作一个HTML / CSS / jQuery图库，其中包含多个页面。

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

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

所以这里是我的问题：你能禁用HTML上的文本选择吗？如果没有，我会非常错过闪光灯以及它在文本框上的高配置......

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

更新2017年1月：

据我可以使用，除了Internet Explorer 9和更早版本以外，所有浏览器当前都支持user-select （但遗憾的是仍然需要供应商前缀）。

所有正确的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>

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

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

链接地址: http://www.djcxy.com/p/1099.html

上一篇: How do I disable text selection with CSS or JavaScript?

下一篇: How to style a <select> dropdown with CSS only without JavaScript?