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

时间 2019-11-08

标签 input 标签 disabled 以后引起怪异行为繁體版

原文原文链接

前段时间作了个网盘类的项目，意外发现了这个状况css

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

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

二、input 仍然能够输入英文数字等字符，但没法切换输入法，没法粘贴浏览器

其余浏览器不受影响。this

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

能够用IE 打开这个DEMO 查看。htm

<!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>