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阻止元素被选中及清除选中的方法总结
有时候,我们希望阻止用户选中我们指定区域的文字或内容. 举个栗子,有时候用户在一个区域执行频繁的点击操作,一不小心傲娇地点多了,就会选中当前区域的内容. 再举个栗子,制作轮播组件的时候,点击下一页,若 ...
随机推荐
- 31、SAM文件中flag含义解释工具--转载
转载:http://www.cnblogs.com/nkwy2012/p/6362996.html SAM是Sequence Alignment/Map 的缩写.像bwa等软件序列比对结果都会输出这 ...
- sklearn有关参数
from sklearn import datasets from sklearn.linear_model import LinearRegression import matplotlib.pyp ...
- supervisor启动worker源码分析-worker.clj
supervisor通过调用sync-processes函数来启动worker,关于sync-processes函数的详细分析请参见"storm启动supervisor源码分析-superv ...
- storm shell命令源码分析-shell_submission.clj
当我们在shell里执行storm shell命令时会调用shell_submission.clj里的main函数.shell_submission.clj如下: shell_submission.c ...
- Entity Framework Code-First(2):What is Code-First?
What is Code-First?: Entity Framework introduced Code-First approach from Entity Framework 4.1. Code ...
- POJ 2398 Toy Storage (叉积判断点和线段的关系)
题目链接 Toy Storage Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 4104 Accepted: 2433 ...
- 令牌Token和会话Session原理与攻略
本篇文章将从无到完整的登录框架或API详细讲述登录令牌原理.攻略等安全点. 有些协议或框架也喜欢把令牌叫票据(Ticket),不论是APP还是Web浏览器,很多框架或协议都用到了本文所说的这套类似的认 ...
- webpack@3.6.0(1) -- 快速开始
本篇内容 前言 配置入口和输出 热更新 loader配置 js代码压缩 html的打包与发布 前言 //全局安装 npm install -g webpack(3.6.0) npm init //安装 ...
- jzoj3208. 【JSOI2013】编程作业(kmp)
题面 Description Will相信,很多同学都有过这样的经历:大牛已经写好了编程作业,而作为菜鸟的自己不会写怎么办呢?拿大牛的代码抄一下嘛!但是提交一模一样的作业是不是不太好?于是就改一改变量 ...
- LaTeX使用心得
LaTeX是一个功能强大的,开源的排版工具. 最近教练让我们做课件,我做数论,鉴于LaTeX的数学公式功能强大(而MS办公软件的数学公式简直就是个LJ)和我的学习精神,我决定用LaTeX写课件. 在一 ...