user-select 用户禁止选中

　　我们在页面输入的文本按理来说应该都是可以选中的，但是如何才能让显示出来的文本或是图片不被选中呢，这时候就需要用到 user-select 属性。

user-select

user-select （CSS属性），控制着用户能否选中文本。除了在文本框中，在 Chrome浏览器中对已经加载的文本没有影响。

一、语法：

user-select：none / text / all / element / auto

user-select 属性的默认值为 text，没有继承性，适用于替换元素外的所有元素。

二、属性值：

　　none：文本不能被选中。注意这个 Selection 对象包含这些元素。从 Firefox21 开始，none表现的想 -moz-none，因此可以使用 -moz-user-select ：text 在子元素上重新启用选择。

　　text：默认值，可以选中文本

　　all：当所有内容可以作为一个整体被选择。（如果双击或是在上下文上点击子元素，那么包含该元素的子元素也将被选中。）

　　element：可以选择文本，但是选择范围受元素边界的约束

　　auto：auto的计算值确定如下：

注：Selection对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。

注意：在不同浏览器之间实现的一个区别是继承。在Firefox中，-moz-user-select不会被绝对定位的元素继承，但在Safari和Chrome中，-webkit-user-select由这些元素继承。

三、设置或检索是否允许用户选中文本

　　IE6-9不支持该属性，但是支持使用标签属性 onselecstart = 'return false;' 来达到 user-select: none 的效果。Safari 和 Chrome 也支持该标签属性。

　　直到Opera12.5 仍然不支持该属性，但是和 IE6-9一样，也支持私有的标签属性 unselectable = 'on' 来达到 user-selector：none 的效果；unselectable 的另外一个值是 off；

　　除了 Chrome 和 Safari外，和在其他浏览器中，如果将文本设置为 -ms-user-select：none; 则用户将无法在该文本块中开始选择文本。不过，如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为 -ms-user-select：none; 的区域文本。

四、浏览器兼容性：

红色：no supported （不支持）

绿色：supported （支持）

绿色有黄色标识：supported width prefix （支持但需要前缀）

五、实例：

HTML

<p>你应该可以选中这段文本。</p>
<p class="unselectable">你不能选中这段文本!</p>

CSS

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

参考资料：

来源：https://www.cnblogs.com/nyw1983/p/12017820.html

标签