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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。