非常不友好的设计:网页打开时自动将光标定位到输入框

作者:一想千开日期:2009-01-26

字体大小: 小中大

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

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

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

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

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

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

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

=======后来的补充:=============================================
看来我也犯了错误.多谢CSDN网友LikeCode的指点,只是这些网站设计不合理(这样的网站太多,大名鼎鼎的建设银行网上银行登录页面就这样,我经常输入密码的时候跳到用户名框,把密码输到用户名中 - - !!),如果设计合理的话,是可以即自动定位光标而且不打断用户输入的.

下面附LikeCode的原贴:
象楼主那样的设计确实是不友好的，因为那是不合理的设计。

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

<!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">
    <div>
    <input type="text" id="txt1" />
    <input type="text" id="text2" />
    <input type="text" id="text3" />
    <img src="default.aspx" />
    </div>
    </form>
</body>
</html>
<script type="text/javascript">
window.onload=function(){document.getElementById("text3").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="txt1">
<!--合理的设计，HTML加载完即定位焦点，不会等待资源加载完再定位，不会打断用户期望的焦点。-->
    <div>
    <input type="text" id="txt1" />
    <input type="text" id="text2" />
    <input type="text" id="text3" />
    <img src="default.aspx" />
    </div>
    </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">
    <div>
    <input type="text" id="txt1" />
    <script type="text/javascript">
document.getElementById("text1").focus();
//期望的元素已出现，即定位焦点。
</script>
    <input type="text" id="text2" />
    <input type="text" id="text3" />
    <img src="default.aspx" />
    </div>
    </form>
</body>
</html>

本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags:

评论: 4 | 引用: 0 | 查看次数: -

mike[2010-03-15 09:34 AM |

]

最近也遇到这个问题,非常感谢楼主的分享和LikeCode的实例

22222[2009-07-13 02:32 PM |

]

思想真好！

phoenix[2009-06-10 10:54 AM |

]

很受启发

11111[2009-02-10 12:44 AM |

]

不错,支持

发表评论

昵　称:
密　码:	游客发言不需要密码.
内　容:	正在加载编辑器...
验证码:
选　项:	禁止表情转换禁止自动转换链接禁止自动转换关键字

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.

非常不友好的设计:网页打开时自动将光标定位到输入框

作者:一想千开 日期:2009-01-26

作者:一想千开日期:2009-01-26