位置：海鸟网 > IT > JavaScript >

很不合理的设计：打开页面光标自动定位到文本框

很多网站都采用了这样的设计：如果网页中存在登录框之类的文本框，那么网页打开后，便自动把光标定位到第一个文本框。

　　设计者的初衷也许是好的：这样可以让用户打开网页时不需要使用鼠标或TAB键来将光标定位到输入框，打开后就可以直接输入。

　　对于页面非常简洁而且服务器速度非常快的网站来说，确实是这样的，能实现设计者的初衷。比如google、baidu，就是这样的网站。

　　但是，绝大多数的网站的页面都不如google、baidu这么简洁，而且他们服务器的速度也没google、baidu这么快，我们看到的是什么样的情况呢？

　　我经常看到有网友打开一个论坛或者网站的登录页面，当登录框出现的时候，页面还没有执行完毕，这时候，他们便用鼠标将光标定位到用户名框开始输入用户名。结果，用户名输一半的时候，或者输入密码的时候。页面执行完毕了，光标定位到用户名框了。于是：要么把后半截用户名输到了前半截的前面，要么把密码输入到了用户名框中……于是，他们不得不将已经输入的内容删除掉然后重新输入一次。

　　这绝不是个例，我相信大家都遇到过这样的情况，而且也看到过不少这样的事。

　　但是，我们的设计者，为什么眼睁睁的看着这样的实际给用户增添了麻烦，还是在设计的时候依然要千篇一律的抄袭这个设计呢？为什么不能思考一下？

　　就像下面的代码这样，将是在页面所有资源加载完重位到某元素，那么，将可能打断用户期望的焦点：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="txt1" />
<input type="text" id="text2" />
<input type="text" id="text3" />
</div>
</form>
</body>
</html>
<script type="text/javascript">
//此为不合理的设计
window.onload=function(){
document.getElementById("text1").focus();
}
</script>



　　如果设计合理的话，是可以即自动定位光标而且不打断用户输入的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server" defaultfocus="text1"><!--合理的设计，HTML加载完即定位焦点，不会等待资源加载完再定位，不会打断用户期望的焦点-->
<div>
<input type="text" id="txt1" />
<input type="text" id="text2" />
<input type="text" id="text3" />
</div>
</form>
</body>
</html>



　　或者像下面的代码一样，将脚本稍作修改即可：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="text1" />
<script type="text/javascript">
document.getElementById("text1").focus();//期望的元素一出现，即定位焦点
</script>
<input type="text" id="text2" />
<input type="text" id="text3" />
</div>
</form>
</body>
</html>



作者：一想千开