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

比如:使用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. 第三篇elasticsearch分布式安装

    elasticSearch 分布式安装 1.在elasticSearch下的config下elasticsearch.yml文件最后一行添加注意 一定要加空格在:后面cluster.name: wal ...

  2. SCSS 中的 &::before 和 &::after

    在看一个文件的时候,发现有&::before 和 &::after, 没有理解怎么用的,因为以前在项目的css文件中,从来没有使用过,也没有见过 网上查询了一下,才发现&::b ...

  3. 子元素应该margin-top影响父元素的解决办法

    在子元素设置margin-top,有时会带着父元素一起移动. 原因: Outer Div [margin: 0 auto] Inner Div [margin-top: 10px] 根据CSS2.1盒 ...

  4. idea调试SpringMvc, 出现:”javax.servlet.ServletException: java.lang.IllegalStateException: Cannot create a session after the response has been committed"错误的解决方法

    调试拦截器出现以下错误: HTTP Status 500 - javax.servlet.ServletException: java.lang.IllegalStateException: Cann ...

  5. 打开*.gd文件的方法

    问题来了: 你可能会收到*.gd的公文,那么一般的阅读器都打不开…… 解决方法: 使用书生阅读器(三合一版)来打开 地址:http://www.du8.com/download/index.html

  6. C++基础之数据类型和表达式

    面向对象特征1)封装 (类)2)继承(基类和派生类)3)多态(通过定义虚函数支持动态联编) 面向对象三要素(类-创建对象的样板,对象,继承) C++基本数据类型整型 int  (32位机,字宽4字节, ...

  7. <你的孤独,虽败犹荣> 很喜欢的句子

    希望未来的工作中能够经常出差,做一个能看到除了湖南之外的世界的人 即使我们一辈子给人打工,也要打自己愿意打的工 正在经历的孤独,我们称之为迷茫,经过的那些孤独,我们称之为成长 青春,是一个容量极其有限 ...

  8. Educational Codeforces Round 52D(ARRAY,模拟最短路)

    #include<bits/stdc++.h>using namespace std;int n,x;int chess[17*17];//记录棋盘上的numberarray<int ...

  9. Selenium2.0+TestNG+Ant+Jenkins自动化测试浅尝

    当前常用自动化测试工具 Web自动化测试工具:QTP .selenium等 性能自动化测试工具:loadrunner.jmeter等 接口自动化测试工具:SoapUI.postman等 手机自动化测试 ...

  10. docker常用到的一些命令

    docker ps 1. docker ps -a(显示所有的容器,包括未运行的) 2.docker ps -q (只显示ip) 3. docker ps -f(根据条件过滤显示的内容) docker ...