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>
浙公網安備 33010602011771號