对于像按钮一样运作的插槽(例如,这个 Stack Overflow 页面侧栏上的按钮题为 问题、标签和用户)或选项卡,如果用户随机选择文本,则是否有 CSS 标准方式禁用突出效果?
我意识到可以用JavaScript做到这一点,而谷歌有点带来了Mozilla-only -moz-user-select选项。
有没有一个符合标准的方式来实现这一点与CSS,如果没有,什么是“最好的实践”方法?
当前回答
你也可能想防止背景菜单出现,当触摸的元素,如按钮,他们的选择被阻止,这样做,添加这个代码到整个页面,或者只是这些按钮元素:
$("body").on("contextmenu",function(e){
return false;
});
其他回答
.hidden:after { 内容: attr(data-txt); } <p class="hidden" data-txt="某些文本你不想被选中"></p>
然而,这不是最好的方式。
关于 WebKit 的文章:
/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
我在 CardFlip 例子中发现了它。
快速黑客更新
如果您使用所有 CSS 用户选择的属性(包括浏览器预定),则仍然存在一个问题。
.div {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* Internet Explorer 10+ */
user-select: none; /* Likely future */
}
正如CSS-Tricks所说,问题是:
WebKit 仍然允许文本复制,如果您选择周围的元素。
您也可以使用下面的一个,以确保一个完整的元素被选中,这意味着如果您点击一个元素,所有包含在该元素的文本将被选中。
.force-select {
-webkit-user-select: all; /* Chrome 49+ */
-moz-user-select: all; /* Firefox 43+ */
-ms-user-select: all; /* No support yet */
user-select: all; /* Likely future */
}
如果您想要禁用除了 <p> 元素以外的任何内容的文本选项,您可以在 CSS 中这样做(请参阅 -moz-none 允许在子元素中过度排序,允许在其他浏览器中没有):
* {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
user-select: none;
}
p {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
}
对于 Internet Explorer 的 JavaScript 解决方案是:
onselectstart="return false;"
