用图片作为label,for属性IE下不起作用
IE浏览器存在一个BUG,当你使用label的for属性达到点击label使对应的表单元素聚焦,label中的内容为图片时,IE浏览器下不起作用。
例如:
<input type="checkbox" id="a"><label for="a"><img src="..."></label>
我们希望得到的效果是:点击“中国银行”,复选框会被选上(或者取消)。在FireFox,CHROME等浏览器下是没有问题的,但是IE浏览器却不吃这套。
解决的办法是使用JS:
window.onload = function(){
if(document.all && navigator.appVersion.indexOf("MSIE")>-1 && navigator.appVersion.indexOf("Windows")>-1)
{
var a = document.getElementsByTagName("label");
for(var i=0,j=a.length;i<j;i++){
if(a[i].hasChildNodes && a[i].childNodes.item(0).tagName == "IMG")
{
a[i].childNodes.item(0).forid = a[i].htmlFor;
a[i].childNodes.item(0).onclick = function(){
var e = document.getElementById(this.forid);
switch(e.type){
case "radio": e.checked|=1;break;
case "checkbox": e.checked=!e.checked;break;
case "text": case "password": case "textarea": e.focus(); break;
}
}
}
}
}
}
用图片作为label,for属性IE下不起作用的更多相关文章
- angularjs 绑定多个属性到下拉框
绑定下拉框 angularjs 代码: //活动下拉切换 $scope.activityChange = function () { var cards = new Array(); var url ...
- 重写TreeView,多层级节点下批量显示图片,图片支持缩略图和文件名列表切换,支持调用者动态匹配选中,支持外界拖入图片并添加到对应节点下
1.先看下整体效果 2.前端代码 <UserControl x:Class="iPIS.UI.Base.Tree.ImageTreeControl" xmlns=" ...
- CSS属性操作/下
CSS属性操作/下 1.伪类 anchor伪类 跟<a>/</a>有关:专用于控制链接的显示效果 a:link(没有接触过的链接),用于定义了链接的常规状态. a:hover( ...
- DedeCMS文章页去img图片width和height属性
方法一:正则匹配去除 打开include/ arc.archives.class.php,查找代码: //设置全局环境变量 $this->Fields['typename'] = $this-& ...
- 绝对定位下margin的作用
以前一直对绝对定位下的margin作用很模糊,今天细看一下 不使用top,left,margin等 <!DOCTYPE html> <html lang="en" ...
- linux下mnt目录作用
linux下mnt目录作用 一.mount 英文解释 登上; 爬上; 攀登; 骑上; 乘上; 跨上 可直接理解为“挂载” 挂接光驱.USB设备的目录,加载后,会在mnt里多出相应设备的目录.mnt是m ...
- 转 /etc/ld.so.conf.d/目录下文件的作用
在了解/etc/ld.so.conf.d/目录下文件的作用之前,先介绍下程序运行是加载动态库的几种方法:第一种,通过ldconfig命令 ldconfig命令的用途, 主要是在默认搜寻目录(/l ...
- jquery下的提交,点击按钮没反应,post方法不执行 JSON方式在FORM表单下不起作用
jquery下的提交,点击按钮没反应,post方法不执行 JSON方式在FORM表单下不起作用
- xmlHttpRequest在Firefox下不起作用?
描述: XMLHttpRequest 在IE下正常,在Firefox下不起作用. 原因: XMLHttpRequest 对象的 onreadystatechange 不会在Firefox下执行, 解放 ...
随机推荐
- 数据库连接池 maxActive,maxIdle,maxWait参数
maxActive 连接池支持的最大连接数,这里取值为20,表示同时最多有20个数据库连接.设 0 为没有限制.maxIdle 连接池中最多可空闲maxIdle个连接 ,这里取值为20,表示即使没有数 ...
- redis安装及错误排查
安装: 1.cd /usr/redis //redis目录作为安装目录,没有自行创建 2.tar xzf redis-4.0.6.tar.gz 3. cd redis-4.0.6 4.make ...
- Hibernate查询操作
操作前需要创建好Hibernate项目,创建项目,可参考:http://www.cnblogs.com/zhaojinyan/p/9336174.html 一下的例子是从其他贴子粘过来的(知识无国界! ...
- 用 python 生成一个简单的词云图
import jieba from nltk import * from wordcloud import WordCloud import matplotlib.pyplot as plt word ...
- web api使用JObject接收时,报“无法创建抽象类”错误
https://bbs.csdn.net/topics/391952288 在下列函数中增加 ModelBinders.Binders.Add(typeof(JObject), new JObjec ...
- nodejs笔记之文件操作
文件操作包含: 读取文件 写入文件 删除文件 创建目录 删除目录 读取文件: // 异步操作 var fs = require("fs"); fs.readFile(". ...
- 怎样从外网访问内网OpenLDAP数据库
外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...
- CSS 标签选择器
CSS 标签选择器 再<stype>标签内,通过指定输入标签来配置CSS样式 <html> <head> <!-- style 设置头部标签--> &l ...
- php5.6 安装intl扩展
PHP intl 是国际化扩展,是ICU 库的一个包装器.所以在安装PHP intl扩展前要先安装ICU库,安装ICU库的具体步骤见:http://www.linuxeye.com/Linux/237 ...
- Unicode UTF-8 UTF-16的关系
以下仅为个人学习的记录,如有疏漏不妥之处,还请不吝赐教. 关系 Unicode是一个字符集.顾名思义,字符的集合.GBK,BIG5,ISO8859-1,ASCII都是字符集. 有一点不同的是,Unic ...