摘要：禁止用户选择的另一种方法是在不想被选中的元素上面绑定事件并且返回。另一种思路伪类伪元素先上一个例子。标准当中方法可以用于所有的属性和元素当中，但是目前还没有任何一个浏览器实现了这个标准。
user-select
前端开发中常常会遇到一种需求，让某些元素的内容不能被选中，一般的做法会用 user-select: none 来做，由于 user-select 并不是标准的 CSS 属性，所以使用的时候要加上浏览器的前缀。
.disabled-select {
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
来看看 user-select 的在桌面端的兼容性：
目前依然有大部分桌面端网页需要兼容 IE8 以上的浏览器，因此使用 user-select 并不是一个最完美的解决方案。
onselectstart禁止用户选择的另一种方法是在不想被选中的元素上面绑定 onselectstart 事件并且返回 false。这个在实际应用中并不好用，如果用户在该元素上开始选择的确可以禁止选中，但只要移出该元素外开始选择就可以无视 onselectstart 事件。
另一种思路：伪类、伪元素先上一个例子。
123
.disable-select:after {
content: "456";
}
由于伪类并不是 DOM 里面的一部分，所以可以发现写在伪类 content 里面的值不能被选中。
但是一般来说页面渲染的内容不能直接写到 CSS 当中，所以这里需要一个强大的 CSS 方法 —— attr。
attr把上面的例子修改一下（传送门）
123
.disable-select:after {
content: attr(data-content);
}
CSS 的 attr 是一个强大的方法，可以直接获取元素属性的值直接用在 CSS 当中。CSS3 标准当中 attr 方法可以用于所有的 CSS 属性和元素当中，但是目前还没有任何一个浏览器实现了这个标准。
但应用于伪类、伪元素（IE8 只支持伪类） content 属性返回 string 类型的用法是被大部分浏览器支持。
不足虽然使用伪类加上 attr 可以做到兼容性较好的禁止选择效果，但是这种方法在 IE8 里面依然有一些不同的表现，使用 alt + a 全选等快捷键按钮依然可以选择伪类里面的内容。
感谢您的阅读，有不足之处请为我指出。
本文同步于我的个人博客 http://blog.acwong.org/2016/08/23/a-new-tecknology-of-prohibiting-from-selecting-text/
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111487.html
摘要：在正式前端一些小细节前端掘金英文原文，翻译未来的太让人兴奋了一方面，是全新的页面布局方式另一方面，是酷炫的滤镜颜色等视觉效果。老司机教你更好的进行编程个技巧前端掘金并不总是容易处理。 CSS3 实现文字流光渐变动画 - 前端 - 掘金来自百度前端技术学院的实践任务：有趣的鼠标悬浮模糊效果，参考：http://ife.baidu.com/course/d...，用CSS3实现了一下，顺便...
摘要：最近工作中遇到上传文件问题，主要需求是一步点击上传，兼容，当时用的控件，这两天扒了一下源码，明白了原理拿出来分享一下。组织页面刷新端代码使用模块将文件暂存在目录下。然后绑定的事件，通过取得中的数据。转自无刷新文件上传 最近工作中遇到上传文件问题，主要需求是一步点击上传，兼容ie8+，当时用的dojox/form/uploader控件，这两天扒了一下源码，明白了原理拿出来分享一下。 总体...
摘要：一什么是浏览器兼容问题所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。条件注释最初于微软的浏览器中出现，并且直至均支持。 一、什么是浏览器兼容问题 所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都...
摘要：一什么是浏览器兼容问题所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。条件注释最初于微软的浏览器中出现，并且直至均支持。 一、什么是浏览器兼容问题 所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都...
摘要：属性可以设置文本框的初始值。特性则是用于指定文本框内可以接受的最大字符数。与这个方法对应的事件，在选择了文本框中的文本时事件触发。如阻止用户选择要调用之前或之后立即将焦点设置到文本框。 在HTML中，有两种方式来表现文本框： 一种是使用input元素的单行文本，另一种是使用textarea的多行文本框。 使用input方式，必须添加type，设置为text。 size特性，可以指定文...
阅读 2658·2021-09-23 11:32
阅读 2695·2021-09-22 15:12
阅读 1606·2019-08-30 14:07
阅读 3342·2019-08-29 16:59
阅读 1412·2019-08-29 11:11
阅读 2207·2019-08-26 13:50
阅读 2296·2019-08-26 13:49
阅读 2478·2019-08-26 11:49
