禁止用户选择的另一种思路(兼容 IE8)

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 的在桌面端的兼容性:

2016-08_user-select-compatibility.png

目前依然有大部分桌面端网页需要兼容 IE8 以上的浏览器,因此使用 user-select 并不是一个最完美的解决方案。

onselectstart

禁止用户选择的另一种方法是在不想被选中的元素上面绑定 onselectstart 事件并且返回 false。这个在实际应用中并不好用,如果用户在该元素上开始选择的确可以禁止选中,但只要移出该元素外开始选择就可以无视 onselectstart 事件。

另一种思路:伪类、伪元素

先上一个例子

<div class="disable-select">123</div>
.disable-select:after {
  content: "456";
}

由于伪类并不是 DOM 里面的一部分,所以可以发现写在伪类 content 里面的值不能被选中。

但是一般来说页面渲染的内容不能直接写到 CSS 当中,所以这里需要一个强大的 CSS 方法 —— attr

attr

把上面的例子修改一下(传送门

<div class="disable-select" data-content="456">123</div>
.disable-select:after {
  content: attr(data-content);
}

CSS 的 attr 是一个强大的方法,可以直接获取元素属性的值直接用在 CSS 当中。CSS3 标准当中 attr 方法可以用于所有的 CSS 属性和元素当中,但是目前还没有任何一个浏览器实现了这个标准。

但应用于伪类、伪元素(IE8 只支持伪类) content 属性返回 string 类型的用法是被大部分浏览器支持。

2016-08_css-attr-compatibility.png

不足

虽然使用伪类加上 attr 可以做到兼容性较好的禁止选择效果,但是这种方法在 IE8 里面依然有一些不同的表现,使用 alt + a 全选等快捷键按钮依然可以选择伪类里面的内容。

感谢您的阅读,有不足之处请为我指出。

本文同步于我的个人博客 http://blog.acwong.org/2016/08/23/a-new-tecknology-of-prohibiting-from-selecting-text/


ac黄博客精选
博文来源 [链接]
1 篇内容引用
2.1k 声望
82 粉丝
0 条评论
推荐阅读
ES6/ES7 三点式 —— 扩展运算符与剩余操作符
ES6 标准提供给 JavaScript 开发者许多简化代码的新特性,今天要介绍的扩展运算符就是非常常用的一种。可以使你的代码更加简洁优雅。

ac黄10阅读 7.6k评论 1

还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图
CSS 如何设置自动滚动定位的“安全”间距?
欢迎关注我的公众号:前端侦探介绍两个和滚动定位相关的 CSS 属性:scroll-padding和 scroll-margin在平时开发中,经常会碰到需要快速定位的问题,比如常见的锚点定位 {代码...} 这样,在点击a标签时会自动定位到...

XboxYan30阅读 2.2k评论 2

封面图
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan29阅读 3.5k评论 2

封面图
现代 CSS 之高阶图片渐隐消失术
在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: {代码...} {代码...} 但是,CSS 的功能如此强大的今天。我们可以利用 CSS 实现的渐隐效果已经不再是如此的简单。想想看,...

chokcoco25阅读 2.1k

封面图
除了 filter 还有什么置灰网站的方式?
大家都知道,当一些重大事件发生的时候,我们的网站,可能需要置灰,像是这样:当然,通常而言,全站置灰是非常简单的事情,大部分前端同学都知道,仅仅需要使用一行 CSS,就能实现全站置灰的方式。像是这样,我...

chokcoco19阅读 1.6k评论 1

封面图
vue中style scope深度访问新方式(:deep())
1、&gt;&gt;&gt;如果vue的style使用的是css,那么则 {代码...} 但是像scss等预处理器却无法解析&gt;&gt;&gt;,所以我们使用下面的方式.2、/deep/ {代码...} 但是有些开发者反应,在vue-cli3编译时,deep的方式会...

寒水寺一禅11阅读 34.8k评论 9

2.1k 声望
82 粉丝
宣传栏