争怎路由网:是一个主要分享无线路由器安装设置经验的网站,汇总WiFi常见问题的解决方法。

css如何完成防范文本被选中,防范复制?(代码示例)

时间:2023/12/23作者:未知来源:争怎路由网人气:

网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
在前端开发中,有时会出现这样一种情况:双击文字后,文字就会被选中,特别丑,一点也不美观,也很不方便;而且有时候在某些网页模块上我们就是就是需要文字不可以被选中或复制。

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

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

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

基本语法:

user-select:value;

可以设置以下的属性值:

auto:默认值,文本将根据浏览器的默认属性进行选择;

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

text:设置用户可以选择元素中的文本 ;

element:设置文本可选,但选择范围受元素边界的约束(该属性值只被IE和FF支持)

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

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

浏览器支持情况

1.jpg

上图列出的是当user-select属性的值为none

关键词:css如何完成防范文本被选中,防范复制?(代码示例)




Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版