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 ...
随机推荐
- Eclipse 基于接口编程的时候,快速跳转到实现类的方法(图文)
Eclipse 基于接口编程的时候,要跳转到实现类很麻烦,其实Eclipse已经实现该功能. 只要按照Ctrl键,把鼠标的光标放在要跳转的方法上面,第一个是跳转到接口里面,第二个方法是跳转到实现类的位 ...
- visual webgui theme designer
- ASP.NET MVC学习系列(二)-WebAPI请求
继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现 ...
- The Monty Hall Problem
GNG1106 Lab 3The Monty Hall ProblemBackgroundThe Monty Hall Problem is a famous probability puzzle, ...
- eclipse 运行报java.lang.OutOfMemoryError: PermGen space解决方法
一.在window下eclipse里面Server挂的是tomcat6,一开始还是以为,tomcat配置的问题,后面发现,配置了tomcat里面的catalina.bat文件,加入 set JAVA_ ...
- JAVA SE 803 考试前突击
考试的宗旨仍然是掌握基础知识,不过鉴于Oracle的这个认证考试还有不少的大家来找茬的成份在,所以一定一定要细心为上. 关于抽象类的坑点集合: 抽象类不是必须得有抽象方法,但有抽象方法的类必须是抽 ...
- [AX]AX2012 Number sequence framework :(三)再谈Number sequence
AX2012的number sequence framework中引入了两个Scope和segment两个概念,它们的具体作用从下面序列的例子说起. 法国/中国的法律要求财务凭证的Journal nu ...
- SAP S4 Finance6个支持企业实时财务管理的主要创新领域
本文将讲述下 SAP Simple Finance里面6个支持企业实时财务管理的主要创新领域. Simple Finance 在以下几个方面具有自己独特的优势: ● 更加简洁的用户体验,可以让用户在任 ...
- CLR via C# 提纲
第I部分 CLR基础第1章 CLR的执行模型 31.1 将源代码编译成托管模块 31.2 将托管模块合并成程序集 61.3 加载公共语言运行时 81.4 执行程序集的代码 101.4.1 IL和验证 ...
- SQL查询 - 表连接
一.连接查询简介 连接查询中用来连接连个表的条件称为连接条件或连接谓词.其形式为: [<表1>].<列名1><连接运算符>[<表2>].<列2&g ...