Fantasy Soft

posts - 257, comments - 1336, trackbacks - 63, articles - 8

从onfocus方法看浏览器的兼容性

Posted on 2005-07-12 22:01 FantasySoft 阅读(2538) 评论(11) 编辑收藏网摘所属分类: All About Soft 、Miscellaneous

在Web Application的开发测试当中，由于存在不同的访问终端——浏览器，因此需要在不同浏览器下运行应用程序，以检验应用程序在不同的浏览器下的外观及功能上是否保持一致。尽管现在的浏览器之间的兼容性已经是相当不错，但是在对Javascript的支持上就有相当大的区别。今天就在onfocus方法上碰到了钉子。具体的代码是类似这样的：

<html>

<head>

function shiftFocus() {

document.form1.list.focus();

}

</script>

</head>

<body>

<input type="radio" name="group" /> Name

<input type="radio" name="group" onfocus="shiftFocus()" /> Company

<option>--Please select--</option>

</select>

</form>

</body>

</html>

为了说明问题，将Javascript方法中逻辑处理省略掉了。从代码中可以看到，当焦点focus在第二个RadioButton的时候，就调用shiftFocus方法，然后在shiftFocus方法中把焦点focus在下拉框。好了，将这段代码保存在一个文件中，然后先用IE打开。因为是要测试onfocus的方法，那么很自然就会想到利用tab键来移动焦点。于是就去按tab键了，你发现什么了吗？焦点是没有办法落在第二个RadioButton上的。也许你会想，这不就是moveFocus方法起作用了吗？咋一想，似乎是对的。那好，我们就把onfocus那段去掉看看。然后，你还是发现焦点没有办法落到第二个RadioButton上。这个是第一点问题了。既然用tab键不成，那么就用鼠标来吧。先把刚刚删除的onfocus那段先恢复回去，然后再来试试看。当你点击了第二个RadioButton的时候，一个很奇怪的现象发生了，RadioButton变灰了，感觉就是被disable掉了一样。但这只是好像，因为这个RadioButton并没有disable掉，你仍然可以点击它，onfocus方法仍然被调用。这就是第二点问题了。如果你使用Netscape或者Firefox打开，则以上两个问题都不存在。
这里只是举了一个简单的例子，还有一些更加希奇古怪的事情，都没有办法讲其描述出来。总之，整体感觉IE对于Javascript的支持是最差的，而Netscape则最好。

Feedback

#1楼  回复 引用

2005-07-12 22:34 by 云呼呼 [未注册用户]

1 变灰是因为当你点击Company 时,你重定义了焦点转移,当刚选中的时候这个Redio是灰色的,但马上就执行了焦点转移,所以就留下灰色的样式了,你用onClick替代onFocus就没这问题了;
2 至于tab键没法落在第二个Redio,因为你定义的两个Redio是一组(name一样),Tab只在不同的Name间移动
3 document的标准用法是 document.all.(id),document.form好像是IE的不知道对不对 ^^