IE下 input 的父级标签被 disabled 之后引发的怪异行为

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

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>

　　

posted on 2013-08-20 11:31  trance  阅读(1101)  评论(0)  编辑  收藏  举报

导航