前段时间做了个网盘类的项目，意外发现了这个情况

IE下，将input的父级标签增加 disabled 属性之后，input 的行为变得怪异：

1、input 背景变灰，疑似也被disabled 了。

2、input 仍然可以输入英文数字等字符，但无法切换输入法，无法粘贴

其他浏览器不受影响。

层层排查之后才发现是 input 的父级标签被设置了 disabled="true" 所致。

可以用IE 打开这个DEMO 查看。

<!doctype html>

<html>

<head>

<meta charset="gb2312">

<title>disable input parent</title>

<script src="http://s0.qhimg.com/lib/jquery/183.js"></script>

<style>

	.enabtn,

	.dis .disbtn{ display:none;}

	.dis .enabtn{ display:block;}

	input{width:300px; margin-bottom:4px; height:24px;}

	button{ width:86px; height:26px; line-height:26px;}

</style>

</head>

<body>

<span id="con">

<input type="text" maxlength="255">

</span><br>

<button type="button" class="disbtn">

	disable span

</button>

<button type="button" class="enabtn">

	enable span

</button>

<script>

	$('button').click(function(){

		var btn = $(this);

		if(btn.hasClass('disbtn')){

			$('body').addClass('dis');

			$('#con').attr('disabled',true);

			}else{

			$('body').removeClass('dis');

			$('#con').removeAttr('disabled');

			}

		});

</script>

</body>

</html>

　　

IE下 input 的父级标签被 disabled 之后引发的怪异行为的更多相关文章

  1. JS - 点击事件排除父级标签

    点击事件排除父级标签,这里使用的是stopPropagation()方法.event.stopPropagation(); 对了,这里还用了解除click事件,unbind. 下面这篇博文,介绍挺全的 ...

  2. IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1个像素的偏差

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. IIS7.5下启用asp父级路径

    如果你是运行asp显示需要启动父路径的话可以这样解决: 在IIS 下 打开ASP选项,有个启用父路径的选择项,选择True 就可以了! 具体看图!因为没法贴两张图,就弄在一张里了!

  4. 解决“”父级标签和子标签边框重叠，设置子标签的margin父标签会跟着移动“”的方法

    1.可以给父标签一个padding,然后给一个很小的值,虽然不影响整体但是不建议使用 2.给父标签一个"over:hidden"的样式,推荐使用

  5. CSS解决父级边框坍塌的问题

    1. 浮动元素后面增加空的div 首先在父级标签内添加如下<div>标签 <div id="clear"></div> 然后在CSS中对该标签进 ...

  6. Element-ui树形控件el-tree获取父级节点的id

    Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 这种只有在所有子级都被选中的 ...

  7. div高度不能自适应（子级使用float浮动，父级div高度不能自适应）

    1.问题截图: 2.问题描述: 由于地址.公司名长度的不定性,所以每一条地址所在的父级div高度不定,但是需要设置一个最小的高度min-height:48px;但是当内容增加的时候,父级div高度却不 ...

  8. 前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型)

    前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型) 一丶HTML块级标签 排版标签 p 标签: 段落标签,会自动在段落上下加上空白来分开 p标签 ...

  9. Dedecms中{dede:type}标签支持调用父级栏目名称

    需求: 我们用{dede:type}标签调用栏目相关内容时,同时需要调用该栏目的父级栏目的名称. {dede:type}标签的代码做了一下开发,支持这个调用了. 开发方法: 1.打开include/t ...

随机推荐

  1. Python bin() 函数

    Python bin() 函数  Python 内置函数 描述 bin() 返回一个整数 int 或者长整数 long int 的二进制表示. 语法 以下是 bin() 方法的语法: bin(x) 参 ...

  2. JavaScript对象继续总结

    1.字符串对象 18_1.查看字符串的长度 var a = "hello world" alert(a.length) 18_2.遍历整个字符串的,这里的是索引 for (var ...

  3. php加速缓存器opcache，apc，xcache，eAccelerator

    一.opcache opcache 通过将 PHP 脚本预编译的字节码存储到共享内存中来提升 PHP 的性能, 存储预编译字节码的好处就是 省去了每次加载和解析 PHP 脚本的开销.   PHP 5. ...

  4. win下安装composer

    1.在官网上下载composer的安装程序. https://getcomposer.org/ 2.双击运行Composer-Setup.exe程序,选择你自已的php安装目录打到php.exe.   ...

  5. mvc 封装控件使用mvcpager

    具体使用如下: 前台部分: @RenderPage("~/Views/Controls/_Pagebar.cshtml", new PageBar { pageIndex = Mo ...

  6. Linux xxd命令

    一.简介 xxd 命令用于使用二进制或十六进制格式显示文件内容,可以将指定文件或标准输入以十六进制转储,也可以把十六进制转储转换成原来的二进制形式. 二.选项 http://www.cnblogs.c ...

  7. linux下给php安装memcached及memcache扩展（转）

    http://kimi.it/257.html (另外的方法)linux安装memcached及memcache扩展一.安装libevent函数库下载地址:http://libevent.org默认被 ...

  8. 另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

  9. 01 Maven 安装与配置

    Maven 安装与配置 1. Maven 介绍 Maven 翻译为 "专家","内行".Maven 是 Apache 下的一个纯 Java 开发的开源项目,它是 ...

  10. TLS/SSL简单过程

    .wcf的认证分为两种 1.1 transport模式,在传输层完成认证(只能在传输层完成认证,利用硬件加速效率更高) a.在使用transport模式,非windows凭证的情况下默认使用TLS/S ...