博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS魔法堂:阻止元素被选中
阅读量:7207 次
发布时间:2019-06-29

本文共 1241 字,大约阅读时间需要 4 分钟。

一、前言                            

  在为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属性                

由于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

如果您觉得本文的内容有趣就扫一下吧!捐赠互勉!

本文转自^_^肥仔John博客园博客,原文链接:http://www.cnblogs.com/fsjohnhuang/p/3938597.html,如需转载请自行联系原作者

你可能感兴趣的文章
nodejs发展
查看>>
Fragment过度动画分析一
查看>>
UBI文件系统简介
查看>>
《现代操作系统》精读与思考笔记 第一章 引论
查看>>
System.out.print实现原理猜解
查看>>
每日英语:The Invasion of the Online Tutors
查看>>
codepage IMLangCodePages
查看>>
Leetcode: Valid Parentheses
查看>>
JavaScript Structure
查看>>
java 流媒体服务器Red5 FQA
查看>>
mysql--SQL编程(关于mysql中的日期) 学习笔记2
查看>>
jquery 请求jsp传递json数据的方法
查看>>
Repeater绑定事件ItemDataBound中获取数据库中数据
查看>>
草长莺飞,总归一字
查看>>
HDOJ 2097
查看>>
计算机学科漫谈
查看>>
mac下配置openfire
查看>>
自定义控件实现(转)
查看>>
如何确认访客所在的国家
查看>>
跟着8张思维导图学习javascript
查看>>