设计者的初衷也许是好的：这样可以让用户打开网页时不需要使用鼠标或TAB键来将光标定位到输入框，打开后就可以直接输入。
对于页面非常简洁而且服务器速度非常快的网站来说，确实是这样的，能实现设计者的初衷。比如google、baidu，就是这样的网站。
但是，绝大多数的网站的页面都不如google、baidu这么简洁，而且他们服务器的速度也没google、baidu这么快，我们看到的是什么样的情况呢？
我经常看到有网友打开一个论坛或者网站的登录页面，当登录框出现的时候，页面还没有执行完毕，这时候，他们便用鼠标将光标定位到用户名框开始输入用户名。结果，用户名输一半的时候，或者输入密码的时候。页面执行完毕了，光标定位到用户名框了。于是：要么把后半截用户名输到了前半截的前面，要么把密码输入到了用户名框中……于是，他们不得不将已经输入的内容删除掉然后重新输入一次。
这绝不是个例，我相信大家都遇到过这样的情况，而且也看到过不少这样的事。
但是，我们的设计者，为什么眼睁睁的看着这样的实际给用户增添了麻烦，还是在设计的时候依然要千篇一律的抄袭这个设计呢？为什么不能思考一下？
就像下面的代码这样，将是在页面所有资源加载完重位到某元素，那么，将可能打断用户期望的焦点：
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> </head> <body> <form id="form1" runat="server"> <p> <input type="text" id="txt1" /> <input type="text" id="text2" /> <input type="text" id="text3" /> </p> </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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> </head> <body> <form id="form1" runat="server" defaultfocus="text1"><!--合理的设计，HTML加载完即定位焦点，不会等待资源加载完再定位，不会打断用户期望的焦点--> <p> <input type="text" id="txt1" /> <input type="text" id="text2" /> <input type="text" id="text3" /> </p> </form> </body> </html> |
或者像下面的代码一样，将脚本稍作修改即可：
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> </head> <body> <form id="form1" runat="server"> <p> <input type="text" id="text1" /> <script type="text/javascript"> document.getElementById("text1").focus();//期望的元素一出现，即定位焦点 </script> <input type="text" id="text2" /> <input type="text" id="text3" /> </p> </form> </body> </html> |
作者：一想千开