禁止用户选择的另外一种思路（兼容 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 的在桌面端的兼容性：

目前依然有大部分桌面端网页须要兼容 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 类型的用法是被大部分浏览器支持。

不足

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

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

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