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

最新推荐文章于 2024-05-24 15:21:41 发布

转载最新推荐文章于 2024-05-24 15:21:41 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/trance/p/3269846.html

文章标签：

#javascript #ViewUI

本文介绍了一个在Internet Explorer浏览器中出现的问题：当输入框的父元素被设置为disabled时，输入框虽仍可输入文本，但却无法切换输入法或进行粘贴操作。文章通过一个DEMO演示了这一现象，并提供了具体的HTML代码示例。

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

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>

转载于:https://www.cnblogs.com/trance/p/3269846.html