css3的user-select属性设置文本内容能否被选择

CSS3中提供了个user-select属性来设置或检索是否允许用户选中文本。

语法

user-select：none | text | all | element。

默认值：text。

适用性：除替换元素外的所有元素。

继承性：无。

动画性：否。

计算值：指定值。

取值

none：文本不能被选择。

text：可以选择文本（默认值）。

all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素。

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

说明、兼容性与注意事项

该属性用于设置或检索是否允许用户选中文本。

1.IE6~9不支持该属性，但支持使用标签属性【onselectstart="return false;"】来达到【user-select: none;】的效果。

2.Safari和Chrome也支持该标签属性。

3.Opera直到12.5仍然不支持该属性，但和IE6~9一样，也支持使用私有的标签属性【unselectable="on"】来达到【user-select: none;】 的效果。

4.unselectable的另一个值是off（默认值）。

5.除Chrome和Safari外，在其它浏览器中，如果将文本设置为【-ms-user-select: none;】，则用户将无法在该文本块中开始选择文本。不过，如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为【-ms-user-select: none;】的区域文本，即文本的选择是具有连续性的，这个属性在除了Chrome和Safari外的其他浏览器上也不具备即时打断文本连续选择的特性。

6.这个属性对应的脚本特性为userSelect。

简单示例

<style>
.testUserSelect{
　　padding: 10px;
　　-webkit-user-select: none;
　　-moz-user-select: none;
　　-o-user-select: none;
　　user-select: none;
　　background: #eeeeee;
}
</style>

<div class="testUserSelect" onselectstart="return false;" unselectable="on">选我试试，选到我就让你嘿嘿嘿。</div>

选我试试，选到我就让你嘿嘿嘿。

 

"世界那么大，可我还是遇见了你。世界那么小，可我还是弄丢了你。"