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 = , 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魔法堂:阻止元素被选中的更多相关文章
- JS与CSS阻止元素被选中及清除选中的方法总结
有时候,我们希望阻止用户选中我们指定区域的文字或内容. 举个栗子,有时候用户在一个区域执行频繁的点击操作,一不小心傲娇地点多了,就会选中当前区域的内容. 再举个栗子,制作轮播组件的时候,点击下一页,若 ...
- JS魔法堂:元素克隆、剪切技术研究
一.前言 当需要新元素时我们可以通过 document.createElement 接口来创建一个全新的元素,也可以通过克隆已有元素的方式来获取一个新元素.而在部分浏览器中,通过复制来获取新元素的效率 ...
- JS魔法堂:LINK元素深入详解
一.前言 我们一般使用方式为 <link type="text/css" rel="stylesheet" href="text.css&quo ...
- JS魔法堂:IMG元素加载行为详解
一.前言 在<JS魔法堂:jsDeferred源码剖析>中我们了解到img元素加载失败可以作为函数异步执行的优化方案,本文打算对img元素的加载行为进行更深入的探讨. 二.资源加载的相关属 ...
- JS魔法堂:属性、特性,傻傻分不清楚
一.前言 或许你和我一样都曾经被下面的代码所困扰 var el = document.getElementById('dummy'); el.hello = "test"; con ...
- JS魔法堂:那些困扰你的DOM集合类型
一.前言 大家先看看下面的js,猜猜结果会怎样吧! 可选答案: ①. 获取id属性值为id的节点元素 ②. 抛namedItem is undefined的异常 var nodes = documen ...
- JS魔法堂:判断节点位置关系
一.前言 在polyfill querySelectorAll 和写弹出窗时都需要判断两个节点间的位置关系,通过jQuery我们可以轻松搞定,但原生JS呢?下面我将整理各种判断方法,以供日后查阅. 二 ...
- JS魔法堂:jsDeferred源码剖析
一.前言 最近在研究Promises/A+规范及实现,而Promise/A+规范的制定则很大程度地参考了由日本geek cho45发起的jsDeferred项目(<JavaScript框架设计& ...
- JS魔法堂:doctype我们应该了解的基础知识
一.前言 什么是doctype?其实我们一直使用,却很少停下来看清楚它到底是什么,对网页有什么作用.本篇将和大家一起探讨那个默默无闻的doctype吧! 二.什么是doctype doctype或DT ...
随机推荐
- 解决Visual Studio 调试时候不能直接访问.json后缀文件的问题
Web.config中作如下配置: <system.webServer> <staticContent> <mimeMap fileExtension=".js ...
- CSS层叠样式表的层叠是什么意思(转自知乎)
转自知乎上的回答:http://www.zhihu.com/question/20077745 解答一: 层叠指的是样式的优先级,当产生冲突时以优先级高的为准.1. 开发者样式>读者样式> ...
- 演化理解 Android 异步加载图片
原文:http://www.cnblogs.com/ghj1976/archive/2011/05/06/2038738.html#3018499 在学习"Android异步加载图像小结&q ...
- thinking in object pool
1.背景 对象池为了避免频繁创建耗时或耗资源的大对象,事先在对象池中创建好一定数量的大对象,然后尽量复用对象池中的对象,用户用完大对象之后放回对象池. 2.问题 目前纵观主流语言的实现方式无外乎3个步 ...
- friend class
友元函数与友元类. C++中以关键字friend声明友元关系.友元可以访问与其有friend关系的类中的私有成员.友元包括友元函数和友元类. 编辑本段1.友元函数 如果在本类以外的其它地方定义 ...
- 谈"自驱力"
最新说明: 1.标题是为了博眼球取的,请不大家不要纠结具体薪资数字,我瞎取的 2.请注意素质,不要满口喷粪,不要搞人身攻击,尊重别人,就是尊重你自己 3.请大家就事论事,不要胡乱臆想,请站在全局的角度 ...
- 物料分类账 [COML] PART 1 - 概览
物料分类账 [COML] PART 1 - 概览 一).原理 1). •实际成本/物料分类帐是产品成本控制模块的一个子模块,产品成本控制包括三个子模块,产品成本计划,成本对象控制,实际成本/物料分类帐 ...
- iOS项目立项
哎,计划总是赶不上变化,仿佛又回到了十年前高三的时候,每月.每周.每天都有计划,但是每周.每天都有计划外的因素导致了计划时时变,唯一不变的就只有变化了. 想了许久,中期计划内还是转回iOS吧,说转回其 ...
- 为Eclipse添加Java和Android SDK源代码
1.添加jdk源码进入eclipse Ctrl + Click -->Attached Source 路径:D:\Program Files\Java\jdk1.8.0_45\src.zip 2 ...
- ITF Demo代码(用VBScript构建的接口测试框架)
ITF Demo代码(用VBScript构建的接口测试框架) http://blog.csdn.net/testing_is_believing/article/details/20872629