禁止用戶選擇的另外一種思路（兼容 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/