网站可用性研究:页面载入后自动选择表单输入框

网站可用性-自动选择输入框

  大多数网站都很注重自己网站的站内搜索这项服务,在网站首页放置搜索表单以提高网站可用性已经成为网站设计的重要环节。但令人惊讶的是一些网站未能实现在页面读取出来以后自动将光标放在搜索框内,这是的网站用户如果来到网站的第一个动作是搜索,他们需要用鼠标单击搜索框或按下tab键将光标移到搜索框,甚至有少数网站连表单的tab按键索引都没有设置。


  最简单的解决办法仅仅需要一行Javascript代码。将下面的代码添加到body标签中,将”form_name”修改为你网页中搜索表单的name值,将“form_field”修改为搜索表单中搜索输入框的name值:

<body onLoad=”document.forms.form_name.form_field.focus()”>

下面这里是网页中表单元素的大致情况:

<form method=”get” name=”form_name” action=”#”>
    <input type=”text” name=”form_field” size=”20″ />
    <input type=”submit” value=”Go” />
</form> 

  就是这么简单!以后您的网站用户只要在网站加载后输入要搜索的关键词然后点击搜索按钮就可以完成搜索了,省去了点击输入框那一步,虽然只是省了一步,但网站的可用性用户体验提升了一大步,添加一行代码并不会让网站有任何损失,反而会让用户有更好的使用体验,何乐而不为呢?

补充说明:

  虽然上面所说的方法仅需添加一行代码就可以解决,但是细心的网页设计师可能会想到一个浏览器自带的快捷键功能,那就是退格键(BackSpace)可以返回在这个网站浏览的上一个网页,如果仅用上面说的方法来让页面加载后自动选择输入框,那么再按退格键返回上一页面将变得无效。所以,如果作为网页设计师的你想让自己的网站的用户体验更加完美,就需要使用以下JavaScript代码,既能实现网页加载后自动选择表单的输入框,又能使用退格键返回上一页面,代码如下:

window.onload = function () {
        // 自动聚焦表单中ID为’focusme’的输入框
        var input = document.getElementById (‘focusme’);
        input.focus ();
        // 下面代码用于捕获用户按下的按键,然后返回上一个页面
        document.onkeydown = function (e) {
                if (!e) {
                      var e = window.event;
                }
                if (e.keyCode === 8 && !input.value) {
                      history.back();
                }
        };
};

转载声明
原载:彬Go
本文链接:http://blog.bingo929.com/web-usability-select-input.html
如需转载必须以链接形式注明原载或原文地址,谢谢合作!

16 Comments

发表评论

  • 电视图纸
    2009-01-10

    博主好啊。你的文章和博客都不错。我也是做网站的.有空我会常来转转

  • 暴风彬彬
    2009-01-10

    @riant:
    在input标签内添加tabindex属性就可以设置tab的顺序了,从0开始,如果不想让某个input使用tab快捷键,那就设值为-1

  • riant
    2009-01-10

    另外想问一个问题,你说的 “表单的tab按键索引”是指按键盘上的“Tab”键,光标在表单中自上而下的跳转吗?
    我之前还以为这个是浏览器或者说Tab键的功能呢,也确实遇到过你说的那些少数网站,请问,代码中什么地方起到索引tab键的功能?

  • riant
    2009-01-10

    谢谢分享