IE8、IE7、IE6中使用getElementById需要注意的问题
2013-10-08 21:23
411 查看
最近,在公司负责编写一个绩效考核模块,页面上有许多输入框,笔者就想用javascript做一下简单验证,用struts的验证比较麻烦而且增加服务器负载。笔者在公司电脑上安装了IE10、chrome、firefox、搜狗浏览器这几个比较主流的浏览器进行测试,没有发现什么问题,但是提交代码后,别人在IE8上测试出现了各种各样的问题。。。笔者表示十分郁闷!!下面是笔者写的部分js代码和html页面代码:
上面是一部分代码,不是源代码。。。。笔者这里设计让div来显示错误提示,div的id属性与input的name属性相同,这样使用onblur事件,当鼠标离开文本框时,调用check方法,check方法传入的是input标签做参数,通过访问input标签的name属性,获得div的id属性,再通过getElementById获得div标签,控制div标签里面的内容。。。
可是,在IE8上发现,div标签内的内容并没有任何变化,倒是input标签的显示来回变化。。。。
笔者觉得这完全是IE8上使用getElementById这个方法时,没有获得div标签,在通过f12开发者工具进行调试后,发现果然是这样。笔者在网上查了一下getElementById在ie8中使用时注意的问题,发现了这个解释http://www.w3help.org/zh-cn/causes/SD9001
这里提到,同时需注意页面中的元素的 id 属性值不能与其他元素的 name 属性值有重复。
也就是说,假如页面中有个input标签的name属性和某个标签的id属性相同,那么你通过getElementById获得的可能是那个input标签
<html> <head> <script> function check(obj) { var div=document.getElementById(obj.name); if(obj.value=='') div.innerHTML="输入不正确!"; } </script> </head> <body> <input type="text" onblur="check(this);" name="common.serveArea"/> <div id="common.serveArea" style="color:red;display:inline"></div> </body> </html>
上面是一部分代码,不是源代码。。。。笔者这里设计让div来显示错误提示,div的id属性与input的name属性相同,这样使用onblur事件,当鼠标离开文本框时,调用check方法,check方法传入的是input标签做参数,通过访问input标签的name属性,获得div的id属性,再通过getElementById获得div标签,控制div标签里面的内容。。。
可是,在IE8上发现,div标签内的内容并没有任何变化,倒是input标签的显示来回变化。。。。
笔者觉得这完全是IE8上使用getElementById这个方法时,没有获得div标签,在通过f12开发者工具进行调试后,发现果然是这样。笔者在网上查了一下getElementById在ie8中使用时注意的问题,发现了这个解释http://www.w3help.org/zh-cn/causes/SD9001
这里提到,同时需注意页面中的元素的 id 属性值不能与其他元素的 name 属性值有重复。
也就是说,假如页面中有个input标签的name属性和某个标签的id属性相同,那么你通过getElementById获得的可能是那个input标签
相关文章推荐
- ASP.NET#使用母版时,如果要使用js中的getElementById()方法取得某个内容页的元素时要注意的问题
- SD9001: IE6 IE7 IE8(Q) 中的 getElementById 方法能以 name 属性为参数获取某些元素
- 关于使用 document.getElementById("input").value 给输入域赋值赋不上的问题
- 关于IE8不支持document.getElementById().innerHTML的问题
- 使用document.getElementById问题
- IE8,不再需要getElementById?
- javascript使用getElementById会抓到name的问题
- vue+elementUI中使用 el-autocomplete 实现远程搜索的下拉框需要注意的问题
- 关于IE6下面引用外部js时document.getElementById报错的问题
- asp.net中使用getElementById的注意点
- CSS HACK IE6,IE7,IE8,Firefox 兼容性问题
- 使用异常时需要注意的一些问题(转)
- php中使用$_REQUEST需要注意的一个问题
- expect安装和使用需要注意的几个问题(转)
- 使用jQuery Ajax功能的时候需要注意的一个问题
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
- php中使用$_REQUEST需要注意的一个问题
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
- document.getElementById使用
- 使用string.Format需要注意的一个性能问题