专栏首页偏前端工程师的驿站JS魔法堂:阻止元素被选中

JS魔法堂:阻止元素被选中

一、前言                            

  在为IE5.5~9polyfill HTML5新特性placeholder时需要阻止元素被选中,因此在网上、书上查阅相关资料,记录在此以便日后查阅。

二、IE10+实现方式──CSS3                    

.unselect {
    -webkit-user-select: none; 
    -moz-user-select: none;    
    -khtml-user-select: none;  
    -ms-user-select: none;    

    /* 以下两个属性目前并未支持,写在这里为了减少风险 */
    -o-user-select: none;
    user-select: none;  
}

user-select: auto; => 用户可以选中元素中的内容

user-select: none; => 用户不可选中元素中的内容

user-select: text; => 用户可以选中元素中的文字

目前这个 user-select 兼容 Chrome 6+、Firefox、IE 10+、Opera 15+、Safari 3.1+。

三、IE5.5~9的实现──unselectable属性                

<span unselectable="on"></span>

由于unselectable属性不具有继承性,所以要遍历所有子元素并为各子元素添加该属性才有效。

// 将元素及其后代元素均设置为不可选择
var unselectable = function(root){
  root.setAttribute('unselectable', 'on');
  var descendant = root.getElementsByTagName("*");
  var rTagName = /input|iframe|textarea|select/i;
  for (var i = 0, el; el = descendant[i++];){
    if (!rTagName.test(el.tagName)){
      el.setAttribute('unselectable', 'on');
    }  
  }
};

四、参考                             

  《JavaScript框架设计》──9.3.2 user-select

   http://www.html-js.com/article/The-Laispace-block-element-is-selected-and-clear-the-check-method

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JS魔法堂:不完全国际化&本地化手册 之 拓展篇

    前言  最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求——国际化&本地化。熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"...

    ^_^肥仔John
  • CSS3魔法堂:禁止用户改变textarea大小

    一、前言                             在FF、Chrome和Safari下默认时允许用户以拖拽形式来改变textarea大小,这不仅...

    ^_^肥仔John
  • Javascript Prototypes之旅(A Plain English Guide to JavaScript Prototypes译文)

      当我第一次学习Javascript的对象模型时,我的反应时困惑。因为这是我第一次接触基于原型的语言,所以我完完全全被原型弄得糊里糊涂(译者语:在看这篇文章前...

    ^_^肥仔John
  • 蓝本(blueprint)

    将视图方法模块化,既当大量的视图函数放在一个文件中,很明显是不合适,最好的方案是根据功能将路由合理的划分到不同的文件中;而蓝本就是为了解决这个问题而出现的。

    小麦苗DBA宝典
  • ThinkPHP之数据库操作

    数据库的操作是由模型来管理的,模型类的作用大多数情况是操作数据表的,如果按照系统的规范来命名模型类的话,大多数情况下是可以用模型的名字自动对应数据表的。 模型类...

    benny
  • javabean 遍历

    DencyCheng
  • 干货 | Logstash自定义正则表达式ETL实战

    本文建立在干货 | Logstash Grok数据结构化ETL实战上,并专注于在Grok中使用自定义正则表达式。

    用户1390885
  • 第二十二章:SpringBoot项目多模块运用与设计

    恒宇少年
  • 来 ! 玩玩PHPUnit的数据库测试 (上)

    大家好,我是CrazyCodes,今天我们来聊聊50%(不完全统计,不必纠结比例 ?)的程序员都感觉没有啥用的数据库测试。

    CrazyCodes
  • 如何写优雅的SQL原生语句?

    sql各语句执行顺序概览与讲解 项目实战中的一段sql说明讲解 sql语句中别名的使用 书写sql语句的注意事项 前言

    coder_koala

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动