1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > css如何实现禁止文本被选中 禁止复制?(code)

css如何实现禁止文本被选中 禁止复制?(code)

时间:2023-05-12 21:37:35

相关推荐

css如何实现禁止文本被选中 禁止复制?(code)

web前端|css教程

css3,禁止文本被选中,禁止复制

web前端-css教程

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

音乐网站源码采集,ubuntu鼠标拖影,爬虫软件 免费的,在线 聊天 php,贵阳seo干货lzw

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

微会员 微商城 源码,ubuntu 端口开发查看,tomcat图标右下角没了,爬虫框架100例,php怎么插排序视频教程,seo调研pptlzw

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

ai9 源码,vscode发布项目,wps ubuntu,tomcat iis还有,c 使用sqlite报错,dz旅游频道插件,前端最流行的css框架,自学python爬虫难学吗,php编辑word,360 seo优化技术,上传个人视频网站源码,网页背景图片定时切换,微信商城微店铺装修模板lzw

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代码:

这是测试文字,选择试试,你会发现怎么也选不中,无法复制,哈哈哈哈!

说明:

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

总结:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。