有时候,为了让用户有更好的体验,需要禁用掉文本选中功能

比如:使用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禁止文字被选中的更多相关文章

  1. css 禁止文本被选中复制代码

    css 禁止文本被选中复制代码: .cus-text{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none ...

  2. css设置禁止文字被选中

    // 禁止文字被鼠标选中 moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-se ...

  3. css禁止鼠标双击选中文字

    div{ -moz-user-select:none;/*火狐*/ -webkit-user-select:none;/*webkit浏览器*/ -ms-user-select:none;/*IE10 ...

  4. css设置文字不能选中状态

    高版本浏览器的处理方式 -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-u ...

  5. [转]CSS禁止文字选择

    user-select有两个值: none:用户不能选择文本 text:用户可以选择文本 需要注意的是:user-select并不是一个W3C的CSS标准属性,浏览器支持的不完整,需要对每种浏览器进行 ...

  6. 前端开发css禁止选中文本

    在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...

  7. css禁止双击dom节点被选中user-select:none

    css禁止dom节点被选中:  当某个dom节点在快速重复点击的时候出现这个节点被选中,有时候其实并不希望出现这种情况,比如我们使用一个span或者a标签做为按钮dom元素的时候,快速双击这个按钮,就 ...

  8. 【css】CSS设置文字不能被选中

    CSS设置文字不能被选中 /*设置文字不能被选中 以下为css样式*/ -webkit-user-select:none; -moz-user-select:none; -ms-user-select ...

  9. JS与CSS阻止元素被选中及清除选中的方法总结

    有时候,我们希望阻止用户选中我们指定区域的文字或内容. 举个栗子,有时候用户在一个区域执行频繁的点击操作,一不小心傲娇地点多了,就会选中当前区域的内容. 再举个栗子,制作轮播组件的时候,点击下一页,若 ...

随机推荐

  1. 解决PCL MLS : error LNK2019; error LNK2001 virtual MovingLeastSquares process performProcessing问题

    PCL 基于多项式拟合的法线估计.点云平滑和数据重采样 在使用Window VS2010为开发平台,学习PCL点云库的时候,学到曲面重建(Surface).在测试下面的程序的时候,遇到了问题. #in ...

  2. 解决Umbraco中Generated文件夹下面model问题

    在Visual Studio中开发Umbraco项目时,有一个文件夹叫Generated, 在Umbraco 的back office中的Document Type产生的model都会自动进入这个文件 ...

  3. ant安装和配置

    一.安装ant到官方主页http://ant.apache.org下载新版(我用的1.9.2)的ant,得到的是一个apache-ant-1.9.2-bin.zip的压缩包.将其解压到你的硬盘上,例如 ...

  4. Sharepoint2013商务智能学习笔记之Excel Service服务配置(四)

    第一步,新建Excel Service应用程序 第二步,管理中心,在应用程序管理区域点管理服务应用程序,进入应用程序管理列表, 再点击刚才新建好的ExcelServiceApplication进入ex ...

  5. Loadrunner监控服务器资源

    LoadRunner 加载监听服务器的步骤如下: 1.在 LoadRunner Controller 下,将工作面板切换到 Run状态,Available Graphs 栏 ,System Resou ...

  6. cinder服务状态up/down的源码梳理

    基于ocata版本的,源码梳理 1)用户输入cinder service-list命令行,查看cinder服务的状态时,cinder的入口函数为cinder/api/contrib/services. ...

  7. moment.js的方法总结

    总结一个非常实用的日期工具类moment.js,日期获取,格式化等. 引入moment //import 方式 import moment from 'moment'; 设定moment区域为中国 / ...

  8. Codeforces Round #524 (Div. 2) D(思维,构造)

    #include<bits/stdc++.h>using namespace std;long long dp[107];int main(){    int cnt=1;    dp[1 ...

  9. 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[ ...

  10. 数据返回正常 而header头Status=500

    访问接口数据成功返回,但header头Status Code:500,而调用接口的html用ajax访问一直返回500服务器错误,并且ajax一直走error,走不到success中,错误返回状态是连 ...