上一篇： «
下一篇： »

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

　　大多数网站都很注重自己网站的站内搜索这项服务，在网站首页放置搜索表单以提高网站可用性已经成为网站设计的重要环节。但令人惊讶的是一些网站未能实现在页面读取出来以后自动将光标放在搜索框内，这是的网站用户如果来到网站的第一个动作是搜索，他们需要用鼠标单击搜索框或按下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
如需转载必须以链接形式注明原载或原文地址，谢谢合作！