IE下单选按钮隐藏后点击对应label无法选中的bug解决
作者:网络转载 发布时间:[ 2015/8/27 18:03:16 ] 推荐标签:软件测试管理
项目中,有时候填写表单我们的选项会隐藏掉radio或者checkbox,而只显示给用户对应的文字选择,如果用户点击label选择时,在FF/Chrome等标准浏览器中隐藏掉的radio/checkbox也同样随着改变选中状态,而在IE下则不会发生变化。
注意,需要指定表单元素的id属性然后使用label的for属性绑定控件。
代码示例:
<input type="radio" name="gender" id="gender1" value="男" checked="checked" />
<label for="gender1">男</label>
<input type="radio" name="gender" id="gender2" value="女" />
<label for="gender2">女</label>
通过CSS设置display:none 或者 visibility: hidden隐藏掉radio按钮,则当点击label切换选择状态时,对应的按钮实际上是未被改变状态。解决方法有几种:
1.通过javascript脚本来再次操作DOM保证选择状态
$("label").click(function(e){
e.preventDefault();
$("#"+$(this).attr("for")).click().change();
});
2.不使用display:none,通过position属性定位到可视区域外,避开问题。
position: absolute;
top: -999px;
left: -999px;
3.通过z-index/width或透明度opacity将元素隐藏掉。
input{
position: absolute;
z-index: -1;
}
或者是
input{
width: 0;
}
或者是
input{
-webkit-opacity:0;
-moz-opacity:0;
opacity:0;
filter:alpha(opacity:0);
}
需要提醒的是,label的for属性是内联元素,其对应的js属性为htmlFor,例如可以这样访问或设置for属性值。document.getElementById("xxx").htmlFor="inputid";;
目前IE6-IE9都有这样的问题,不知道IE以后会不会和标准浏览器的行为看齐。希望吧!!
相关推荐
更新发布
功能测试和接口测试的区别
2023/3/23 14:23:39如何写好测试用例文档
2023/3/22 16:17:39常用的选择回归测试的方式有哪些?
2022/6/14 16:14:27测试流程中需要重点把关几个过程?
2021/10/18 15:37:44性能测试的七种方法
2021/9/17 15:19:29全链路压测优化思路
2021/9/14 15:42:25性能测试流程浅谈
2021/5/28 17:25:47常见的APP性能测试指标
2021/5/8 17:01:11