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阻止元素被选中及清除选中的方法总结
有时候,我们希望阻止用户选中我们指定区域的文字或内容. 举个栗子,有时候用户在一个区域执行频繁的点击操作,一不小心傲娇地点多了,就会选中当前区域的内容. 再举个栗子,制作轮播组件的时候,点击下一页,若 ...
随机推荐
- 解决PCL MLS : error LNK2019; error LNK2001 virtual MovingLeastSquares process performProcessing问题
PCL 基于多项式拟合的法线估计.点云平滑和数据重采样 在使用Window VS2010为开发平台,学习PCL点云库的时候,学到曲面重建(Surface).在测试下面的程序的时候,遇到了问题. #in ...
- 解决Umbraco中Generated文件夹下面model问题
在Visual Studio中开发Umbraco项目时,有一个文件夹叫Generated, 在Umbraco 的back office中的Document Type产生的model都会自动进入这个文件 ...
- ant安装和配置
一.安装ant到官方主页http://ant.apache.org下载新版(我用的1.9.2)的ant,得到的是一个apache-ant-1.9.2-bin.zip的压缩包.将其解压到你的硬盘上,例如 ...
- Sharepoint2013商务智能学习笔记之Excel Service服务配置(四)
第一步,新建Excel Service应用程序 第二步,管理中心,在应用程序管理区域点管理服务应用程序,进入应用程序管理列表, 再点击刚才新建好的ExcelServiceApplication进入ex ...
- Loadrunner监控服务器资源
LoadRunner 加载监听服务器的步骤如下: 1.在 LoadRunner Controller 下,将工作面板切换到 Run状态,Available Graphs 栏 ,System Resou ...
- cinder服务状态up/down的源码梳理
基于ocata版本的,源码梳理 1)用户输入cinder service-list命令行,查看cinder服务的状态时,cinder的入口函数为cinder/api/contrib/services. ...
- moment.js的方法总结
总结一个非常实用的日期工具类moment.js,日期获取,格式化等. 引入moment //import 方式 import moment from 'moment'; 设定moment区域为中国 / ...
- Codeforces Round #524 (Div. 2) D(思维,构造)
#include<bits/stdc++.h>using namespace std;long long dp[107];int main(){ int cnt=1; dp[1 ...
- Educational Codeforces Round 53C(二分,思维|构造)
#include<bits/stdc++.h>using namespace std;const int N=1e6+6;int x[N],y[N];int sx,sy,n;char s[ ...
- 数据返回正常 而header头Status=500
访问接口数据成功返回,但header头Status Code:500,而调用接口的html用ajax访问一直返回500服务器错误,并且ajax一直走error,走不到success中,错误返回状态是连 ...