[译]用CSS来禁止文本选择

ShevaKuilin 发布于2019-08-28 18:20 / 1346人阅读

摘要：原文有些时候我们需要禁止网页的部分文本不能被选择。这不是一种万全的保证文本不被选择的策略。这种技巧依赖于非标准的特性，这意味着未来对这个属性的可持续支持上面存在着很大的不确定性。屏蔽掉文本选择是很恼人的。

原文：Disable Text Selection with CSS

有些时候我们需要禁止网页的部分文本不能被选择。你可以使用user-select这个CSS特性来实现这个需求。

举例

下面是一个使用了disable-selection类的样式规则，当它作用于一个HTML元素的时候，它会让我们不能够选择这个元素。

.disable-selection{
    -moz-user-select:none; /* Firefox */
     -ms-user-select:none; /* Internet Explorer */
   -ktml-user-select:none; /* KHTML浏览器（比如：Konqueror） */
 -webkit-user-select:none; /* Chrome,Safari,and Opera */
   -webkit-touch-callout:none; /* Disable Android and IOS callout */
}

关于这些样式的一些细节的解释：

-webkit-user-select是给Chrome,Safari和Opera用的（并不需要使用-o-user-select）。

没有前缀的user-select是被故意略去的。

-webkit-touch-callout属性可以让在移动设备上的触摸后弹出失效。就像下面的这些，我们可以让它们不能出现。

演示

查看演示

要时常记住的

有一个陷阱就是：user-select并不是W3C规范中标准的CSS特性。尽管user-select通过添加浏览器前缀有很好的浏览器支持。

前面的例子中，我没有使用没有前缀的user-select特性声明。那是因为在web标准中根本就没有这个属性。我们可以对它的使用类比于于IE专有的CSS属性ms-filter或者-ms-text-kashida-space的属性的使用。

其他需要注意的地方：

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

使用全选快捷键有些时候还是会把屏蔽文本选择(Win:Ctrl+A/Mac:Cmd+A)。这种情况你可以在IE11中清楚的了解到。

这不是一种万全的保证文本不被选择的策略。CSS能够很容易被屏蔽。这种技巧依赖于非标准的CSS特性，这意味着未来对这个属性的可持续支持上面存在着很大的不确定性。

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

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

浏览器支持

更新于：2015年3月

浏览器	版本支持（以上）
Chrome	6
Firefox	2
IE	10
Safari	3.1

移动端

浏览器	版本支持（以上）
Chrome(Android)	2.1
Safari(IOS)	3.2

GPU云服务器云服务器 css文本框用jquery来定位 css选择文本选择功能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111181.html

css相关 - 收藏集 - 掘金

摘要：在正式前端一些小细节前端掘金英文原文，翻译未来的太让人兴奋了一方面，是全新的页面布局方式另一方面，是酷炫的滤镜颜色等视觉效果。老司机教你更好的进行编程个技巧前端掘金并不总是容易处理。 CSS3 实现文字流光渐变动画 - 前端 - 掘金来自百度前端技术学院的实践任务：有趣的鼠标悬浮模糊效果，参考：http://ife.baidu.com/course/d...，用CSS3实现了一下，顺便...

molyzzx 2019-08-29 12:38 评论0 收藏0
【译】表单组件的属性兼容性表

摘要：系列文章说明原文下面的兼容性表将总结出表单对的支持程度，由于和表单的复杂性，这几个表不能认为是最佳的参考对象。该属性不能生效，或者表现很不一致以至于不可靠。在表单组件上，不支持该属性。按钮属性备注该属性不会在上的浏览器上生效。系列文章说明原文下面的兼容性表将总结出HTML表单对CSS的支持程度，由于CSS和HTML表单的复杂性，这几个表不能认为是最佳的参考对象。尽管如此，它们...

李文鹏 2019-08-29 11:07 评论0 收藏0
【译】表单组件的属性兼容性表

摘要：系列文章说明原文下面的兼容性表将总结出表单对的支持程度，由于和表单的复杂性，这几个表不能认为是最佳的参考对象。该属性不能生效，或者表现很不一致以至于不可靠。在表单组件上，不支持该属性。按钮属性备注该属性不会在上的浏览器上生效。系列文章说明原文下面的兼容性表将总结出HTML表单对CSS的支持程度，由于CSS和HTML表单的复杂性，这几个表不能认为是最佳的参考对象。尽管如此，它们...

XanaHopper 2019-08-01 15:35 评论0 收藏0
CSS开发

摘要：译十六进制颜色揭秘原文地址原文作者译文出自掘金翻译计划本文永久链接教程入门篇关于是一款进行栅格布局的辅助工具，它让开发者摆脱了冗杂的数学计算，同时降低了样式与结构的耦合程度。【译】CSS 十六进制颜色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 译文出自：掘金翻译计划本文永久链接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 评论0 收藏0
【译】HTML表单样式

摘要：并非所有组件受的影响都是平等的如今在表单使用时依然有一些困难这些问题可归为三类还好的若存在跨平台问题，一些元素可以只添加少许的样式，有如下几个结构元素此外，还有所有的文本框组件单行或多行，以及按钮。系列文章说明原文本文中，我们将学习如何使用CSS来让HTML表单看起来更漂亮，这可能需要窍门才能做到。由于历史及技术上的原因，表单组件并不太适合使用CSS；而也正因为有这些困难，许...

DC_er 2019-08-30 13:06 评论0 收藏0