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如何实现禁止文本被选中,禁止复制?(代码示例)的详细内容,更多请关注其它相关文章!