IE下 input 的父级标签被 disabled 之后引发的怪异行为
2013-08-20 11:31
375 查看
前段时间做了个网盘类的项目,意外发现了这个情况
IE下,将input的父级标签增加 disabled 属性之后,input 的行为变得怪异:
1、input 背景变灰,疑似也被disabled 了。
2、input 仍然可以输入英文数字等字符,但无法切换输入法,无法粘贴
其他浏览器不受影响。
层层排查之后才发现是 input 的父级标签被设置了 disabled="true" 所致。
可以用IE 打开这个DEMO 查看。
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>
相关文章推荐
- HTML <input> 标签的 disabled 属性
- input 标签(file类型)在IE和FF里的兼容问题
- Html中input标签中的disabled属性要放在标签的最后面,否则结合隐藏标签使用时出错。
- 记录下IE7下的input标签bug
- 如何获取Input标签自定义属性的值ie 8 9 10下取值
- input标签中readonly和disabled的区别
- <a>标签内嵌<input type="image">在IE中链接失效问题
- input 标签(file类型)在IE和FF里的兼容问题
- input 标签 修改 disabled 属性默认样式(适配安卓 IOS)
- HTML <input> 标签的 disabled 属性
- IE和Firefox下,a标签使用href=”javascript:void(0);”和target=”_blank”行为不符合预期
- <input type="image"标签引发的页面提交!
- input标签中使用disabled这个属性导致传参失败等问题
- jsp中标签disabled之后,在action中用request.getParameter()取不到该标签
- html的input标签disabled和readOnly属性的异同点
- ie下文字与input标签水平居中对齐
- <input type="image">标签引发的form表单自动提交
- javascript 添加 移除 input标签 兼容IE FIREFOX
- 监听<input/>标签行为的方法总结
- <input type="image"标签引发的页面提交!