前段时间做了个网盘类的项目,意外发现了这个情况
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{300px; margin-bottom:4px; height:24px;} button{ 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>