css禁止文字被选中
有时候,为了让用户有更好的体验,需要禁用掉文本选中功能
比如:使用a标签模拟按钮,如果不禁用掉文本选中功能,那么双击时会选中文字,用起来很不爽。
多数情况下,只需要使用CSS样式就可以实现这个功能啦:
1 body{
2 -o-user-select: none;
3 -moz-user-select: none; /*火狐 firefox*/
4 -webkit-user-select: none; /*webkit浏览器*/
5 -ms-user-select: none; /*IE10+*/
6 -khtml-user-select :none; /*早期的浏览器*/
7 user-select: none;
8 }
user-select有四个值:
none:文本不能被选择
text:可以选择文本
all:当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素,那么被选择的部分将是以该子元素向上回溯的最高祖先元素。
element:可以选择文本,但选择范围受元素边界的约束
值得注意的是:IE6-9目前需要通过JavaScript来实现。
1 document.body.onselectstart = document.body.ondrag = function(){
2 return false;
3 }
css禁止文字被选中的更多相关文章
- css 禁止文本被选中复制代码
css 禁止文本被选中复制代码: .cus-text{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none ...
- css设置禁止文字被选中
// 禁止文字被鼠标选中 moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-se ...
- css禁止鼠标双击选中文字
div{ -moz-user-select:none;/*火狐*/ -webkit-user-select:none;/*webkit浏览器*/ -ms-user-select:none;/*IE10 ...
- css设置文字不能选中状态
高版本浏览器的处理方式 -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-u ...
- [转]CSS禁止文字选择
user-select有两个值: none:用户不能选择文本 text:用户可以选择文本 需要注意的是:user-select并不是一个W3C的CSS标准属性,浏览器支持的不完整,需要对每种浏览器进行 ...
- 前端开发css禁止选中文本
在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...
- css禁止双击dom节点被选中user-select:none
css禁止dom节点被选中: 当某个dom节点在快速重复点击的时候出现这个节点被选中,有时候其实并不希望出现这种情况,比如我们使用一个span或者a标签做为按钮dom元素的时候,快速双击这个按钮,就 ...
- 【css】CSS设置文字不能被选中
CSS设置文字不能被选中 /*设置文字不能被选中 以下为css样式*/ -webkit-user-select:none; -moz-user-select:none; -ms-user-select ...
- JS与CSS阻止元素被选中及清除选中的方法总结
有时候,我们希望阻止用户选中我们指定区域的文字或内容. 举个栗子,有时候用户在一个区域执行频繁的点击操作,一不小心傲娇地点多了,就会选中当前区域的内容. 再举个栗子,制作轮播组件的时候,点击下一页,若 ...
随机推荐
- Flask11 Session、CSRF、注销session、利用端点自动跳转
1 怎么对存储的cookie数据进行加密 利用response对象去设置cookie时,存储到浏览器中的cookie数据都是明文的,容易被一些计算机爱好者利用:利用session存的cookie数据可 ...
- R语言对矩阵按某一列排序
[plain] view plaincopy a <- c(5,4,3,2,1) b <- c(1,2,3,4,5) c <- cbind(a,b) [plain] view pla ...
- 1.2 DVWA亲测sql注入漏洞(blind)
LOW等级 我们尝试输入: 即如果页面返回为假,则说明后面的语句成功注入 据此我们可以知道 1' and 真 --> 页面显示 “User ID exists in the data ...
- DropDownList绑定数据库
this.DropDownList_设备列表.DataSource = dt_eq;//设置数据源 this.DropDownList_设备列表.DataTextField = "equip ...
- Vue实现添加、删除、关键字查询
从今天开始,将不定期更新关于 Vue 的学习以及各种方法的使用,好了,下面就开始吧 Vue的实例创建首先需要我们引入一个vue.js(也可以在本地npm安装vue,我为了省事就...),然后在HTML ...
- kolla base目录下Dockerfile.j2分析
这几天在研究kolla制作镜像的流程,记录下对kolla项目中base目录Dockerfile.j2阅读过程.本质上base目录下的Dockerfile.j2文件,对是yum 源的一些配置,从而使制作 ...
- 51nod1419 【数学】
思路: n<=3,就是n. 考虑n>3: 我们可以轻松证明n,n-1这两个数互质: 设gcd(n,n-1)=g,n=g*k1,n-1=g*k2; n-(n-1)=g(k1-k2)=1; 所 ...
- 莫队算法-小Z的袜子
小Z的妹子袜子这道题用的是莫队算法,据说解决离线区间询问几乎无敌. 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于 ...
- String类、static、Arrays类、Math类
String类.static.Arrays类.Math类 String类.static.Arrays类.Math类 String类.static.Arrays类.Math类 String类.stati ...
- Nginx停止服务和各种命令
1.停止Nginx服务的四种方法 从容停止服务这种方法较stop相比就比较温和一些了,需要进程完成当前工作后再停止. nginx -s quit 立即停止服务这种方法比较强硬,无论进程是否在工作,都直 ...