【转】使用CSS 禁止文本选择

942 阅读2分钟

禁止文本选择

有些时候我们需要对网页的文本内容进行简单的屏蔽,可以使用user-select这个CSS特性来实现这个需求。
--不过需要注意一点,就是通过CSS设置是可以被浏览器禁用从而导致禁用功能失效o(╥﹏╥)o--

body{
-webkit-touch-callout: none; /*  Android 和 IOS 可以让在移动设备上的触摸后弹出失效。*/
-webkit-user-select: none; /* Chrome,Safari,和 Opera */
-khtml-user-select: none; /* KHTML浏览器(比如:Konqueror) */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer */
user-select: none; /* 因为各个带有前缀的版本已经包含主流浏览器,所以不带前缀的user-select是可以省略的 */
}

需要特别注意的就是:
user-select并不是W3C规范中标准的CSS特性。尽管user-select通过添加浏览器前缀有很好的浏览器支持

其他需要注意的地方:

  • user-select是有问题并且是不稳定的。有些时候你依然还是可以选择文本,特别是当你从没有被屏蔽掉文本选择的文本的那部分开始选择。

  • 使用全选快捷键有些时候还是会把屏蔽文本选择(Win:Ctrl+A/Mac:Cmd+A)。这种情况你可以在IE11中清楚的了解到。 这不是一种万全的保证文本不被选择的策略。CSS能够很容易被屏蔽。这种技巧依赖于非标准的CSS特性,这意味着未来对这个属性的可持续支持上面存在着很大的不确定性。

  • 屏蔽掉文本选择是很恼人的。我会在渐进提升的过程中使用这个技巧:只有当它可以提高使用支持这个user-select特性的浏览器和设备的用户的用户体验的时候才使用它。但是,我绝不会把它设置成一个大范围的CSS选择器像全部选择器(*)或者body.

  • 这个user-select特性可能会让你的样式表失效。如果遵循标准对你来说非常重要,使用这个属性会在你使用规范测试比如说CSS Validation Service的使用出现问题

转自:segmentfault.com/a/119000000…