css如何实现禁止文本被选中，禁止复制？（代码示例）

在前端开发中，有时会出现这样一种情况：双击文字后，文字就会被选中，特别丑，一点也不美观，也很不方便；而且有时候在某些网页模块上我们就是就是需要文字不可以被选中或复制。

那么如何实现这种需求，实现文本不被选中或复制？本篇文章就给大家介绍css实现禁止文本被选中，禁止复制的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

css实现禁止文本被选中，禁止复制的方法，其实很简单，我们可以使用 user-select属性来完成。下面我们来了解一下这个属性。

user-select属性是css3新增的一个属性，它可以用来控制内容的可选择性，设置或检索是否允许用户选中文本，适用于除替换元素外的所有元素。

基本语法：

user-select:value;

可以设置以下的属性值：

auto：默认值，文本将根据浏览器的默认属性进行选择；

none：可以设置用户不能选择元素中的任何内容 ；

text：设置用户可以选择元素中的文本 ；

element：设置文本可选，但选择范围受元素边界的约束（该属性值只被IE和FF支持）

all：当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击发生在子元素上，则该子元素向上回溯的最高祖先元素将被选中。简单来说就是：目标元素将被整体选中，不能只选中一部分，浏览器会自动选中整个元素里的内容。

-moz-none：firefox私有的属性值，设置元素和子元素的文本将不可选；但是，子元素可以通过text重新设置为可选。

浏览器支持情况

上图列出的是当user-select属性的值为none|text|all的情况下各个浏览器的支持程度；属性值为element时，大部分浏览器都不支持，故不列出了。

下面我们通过简单的代码示例来介绍css user-select属性实现禁止文本被选中，禁止复制的方法，考虑兼容性。

禁止文本被选中复制代码示例：

css代码：

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

html代码：

<div class="box" onselectstart="return false;" unselectable="on">
    这是测试文字，选择试试，你会发现怎么也选不中，无法复制，哈哈哈哈！
</div>

说明：

因为IE6-9不支持user-select属性，想要实现user-select:none，即：禁止文本被选中，禁止复制的效果，可以使用标签属性 onselectstart="return false;" 来实现；同时Safari和Chrome也支持该标签属性。

总结：以上就是本篇文章所介绍的css实现禁止文本被选中，禁止复制的全部内容，大家可以自己动手试试，加深对user-select属性的理解。希望能对大家的学习有所帮助，更多相关教程请访问： CSS视频教程， HTML视频教程，bootstrap视频教程！

以上是css如何实现禁止文本被选中，禁止复制？（代码示例）的详细内容。更多信息请关注PHP中文网其他相关文章！