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

比如:使用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. 31、SAM文件中flag含义解释工具--转载

    转载:http://www.cnblogs.com/nkwy2012/p/6362996.html  SAM是Sequence Alignment/Map 的缩写.像bwa等软件序列比对结果都会输出这 ...

  2. sklearn有关参数

    from sklearn import datasets from sklearn.linear_model import LinearRegression import matplotlib.pyp ...

  3. supervisor启动worker源码分析-worker.clj

    supervisor通过调用sync-processes函数来启动worker,关于sync-processes函数的详细分析请参见"storm启动supervisor源码分析-superv ...

  4. storm shell命令源码分析-shell_submission.clj

    当我们在shell里执行storm shell命令时会调用shell_submission.clj里的main函数.shell_submission.clj如下: shell_submission.c ...

  5. 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 ...

  6. POJ 2398 Toy Storage (叉积判断点和线段的关系)

    题目链接 Toy Storage Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4104   Accepted: 2433 ...

  7. 令牌Token和会话Session原理与攻略

    本篇文章将从无到完整的登录框架或API详细讲述登录令牌原理.攻略等安全点. 有些协议或框架也喜欢把令牌叫票据(Ticket),不论是APP还是Web浏览器,很多框架或协议都用到了本文所说的这套类似的认 ...

  8. webpack@3.6.0(1) -- 快速开始

    本篇内容 前言 配置入口和输出 热更新 loader配置 js代码压缩 html的打包与发布 前言 //全局安装 npm install -g webpack(3.6.0) npm init //安装 ...

  9. jzoj3208. 【JSOI2013】编程作业(kmp)

    题面 Description Will相信,很多同学都有过这样的经历:大牛已经写好了编程作业,而作为菜鸟的自己不会写怎么办呢?拿大牛的代码抄一下嘛!但是提交一模一样的作业是不是不太好?于是就改一改变量 ...

  10. LaTeX使用心得

    LaTeX是一个功能强大的,开源的排版工具. 最近教练让我们做课件,我做数论,鉴于LaTeX的数学公式功能强大(而MS办公软件的数学公式简直就是个LJ)和我的学习精神,我决定用LaTeX写课件. 在一 ...