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

比如:使用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. 使用JFileChooser保存文件

    --------------------siwuxie095                                 工程名:TestFileChooser 包名:com.siwuxie095 ...

  2. 1.6 xss挑战平台练习

    ------------------------- XSS挑战之旅 ------------------------- 最近在学习xss,找到了一个xss练习平台,在线地址:http://test.x ...

  3. 深入浅出HTML PDF扫描版

    <深入浅出HTML>是一部讲述现代Web标准的优秀教程,彻底摒弃了过时的内容,始终贯彻三层分离的思想.书中结合实例讲述如何使用HTML.CSS设计符合现代Web标准的网页,并讲解了如何使用 ...

  4. js复习笔记

    isNaN(x) 1.判断结果不是纯数字, var a=1234var b =isNan(a) //b是 false 因为a是纯数字 var a="abc123"var b =is ...

  5. 理解linux服务器mcelog如何工作

    What are Machine Check Exceptions (or MCE)? A machine check exception is an error dedected by your s ...

  6. 【spring容器bean的作用域+spring容器是否是单例的一些问题】

    Spring容器中Bean的作用域 当通过Spring容器创建一个Bean实例时,不仅可以完成Bean实例的实例化,还可以为Bean指定特定的作用域.Spring支持如下5种作用域: singleto ...

  7. C#多进程并行

    为了并行执行多个任务,可以启动多个进程(并行数). 下面提供两种方法,总任务数10,最大并行数4. 一.方法1 using System; using System.Collections.Gener ...

  8. 洛谷P3092 [USACO13NOV]没有找零No Change

    P3092 [USACO13NOV]没有找零No Change 题目描述 Farmer John is at the market to purchase supplies for his farm. ...

  9. [Xcode 实际操作]三、视图控制器-(9)在Storyboard中使用标签和按钮控件

    目录:[Swift]Xcode实际操作 本文将演示标签和按钮在故事板中的应用. 在欢迎串口中,点击创建一个新的项目[Create a new Xcode project] [Single View A ...

  10. Spring MVC 简述:从MVC框架普遍关注的问题说起

    任何一个完备的MVC框架都需要解决Web开发过程中的一些共性的问题,比如请求的收集与分发.数据前后台流转与转换,当前最流行的SpringMVC和Struts2也不例外.本文首先概述MVC模式的分层思想 ...