首页 > 代码库 > 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
JS魔法堂:阻止元素被选中
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。