JS魔法堂:阻止元素被选中
时间:2022-04-22
本文章向大家介绍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
- 我的职业是前端工程师【五】: 前端工程师必会的六个调试技能
- WPF中ICommand接口 的一个设计问题
- 我的职业是前端工程师【四】:如何选择合适的前端框架,告别选择恐惧症
- 我的职业是前端工程师【七】:你真的懂前后端分离吗?
- 使用了 Google AMP 网站加速技术后,我的博客快了八倍
- 前端程序员必知:单页面应用的核心
- b这样去设计 URL,可以提高网站的访问量
- 程序员必知之SEO
- 进程监控工具supervisor 启动Mongodb
- 祭奠那些年,我弃坑的开源轮子
- 这些奇技浮巧,助你优化前端应用性能
- Stepping.js——两步完成前后端分离架构设计
- 我的职业是前端工程师【十】客户端存储艺术:数据存储与模型
- 【开源】2md:将复制的内容、网页转成 markdown
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Struts Scan工具的使用
- 树莓派基础实验24:超声波测距传感器实验
- 数据结构与算法系列2 线性表 链表的分类+使用java实现链表+链表源码详解
- 从spring boot 启动过程看apollo的初始化过程( 二)
- Apache IoTDB 系列教程-4:客户端接口
- 数据结构与算法系列2 线性表 使用java实现动态数组+ArrayList源码详解
- Kali中密码暴力破解工具hydra的使用
- Apache IoTDB 系列教程-8:文件同步工具
- 树莓派基础实验25:DS18B20温度传感器实验
- 迈出加入 Apache IoTDB 社区的第一步!(订阅邮件、调试代码)
- kali下一些代理工具的简单描述
- 树莓派基础实验26:旋转编码器实验
- java web Session会话技术(原理图解+功能+与Cookie的区别+基本使用)
- JAVA创建对象有哪几种方式
- Apache IoTDB 系列教程-7:时序数据文件格式 TsFile