您的位置:知识库 » Web前端

改善登陆界面的用户体验: 自动聚焦表单

作者: sofish  发布时间: 2010-09-09 09:52  阅读: 2147 次  推荐: 0   原文链接   [收藏]  
摘要:一个非常棒的提升体验的做法是,在载入页面时自动聚焦到第一个提供用户输入的表单框,让用户不用再多一个点击,就可以输入。本文描述了这种技术的具体实现。

  在登陆界面中,通常,最重要的部分为登陆的Form表。一个非常棒的提升体验的做法是,在载入页面时自动聚焦到第一个提供用户输入的表单框,让用户不用再多一个点击,就可以输入。这被很多网站采用,比如维基百科就是这样:

  当然,自动聚焦不仅仅适合在登陆界面,而适合在任何需要的界面。比如WordPress登陆后台的界面和支付宝的登陆界面,都采用了自动聚焦的方法。

  而具体应该是怎样实现的呢?假设我们的表单如下:

<form id="signin" method="post" name="signin" action="http://www.happinesz.cn">
 <input value="hidefor" type="hidden" name="hide" />
 <input id="usr" name="usr" />
 <input id="pwd" type="password" name="pwd" />
 <input id="smbt" value="submit" type="button" name="smbt" />
</form>

我们要让焦点落在id="usr"input上,用 Javascript 的方法,我们可以这样做:

document.forms["signin"].elements["usr"].focus();

这里是当我们明确知道要在那个表单上添加 focus 的时候可以用的方法。这里,elements也可以用方括号的方法来获取input表单,比如.elements[0]即为第一个input表单。当我们要聚焦的 input前面有type="hidden"的隐藏input,由于隐藏的input是不支持.focus的,一旦应用其上,就会出现Javascript错误,要避免这样的的错误。我们可以搜索第一个表单中,第一个非隐藏的 input,并给加上.focus:(除非你是想封装起来,自动判断,不然,最好不要用这个方法,多浪费资源啊,又if又for的)

window.onload = function(){
 if(document.forms.length>0){
  for(i=0;i<document.forms[0].elements.length; i++){
   var oInput = document.forms[0].elements[i];
   if(oInput.type!="hidden"){
    oInput.focus();
    return;
   }
  }
 }
}

  到这里,很多网站都只做到这里,比如我前面提到的Wordpress的登陆界面和支付宝的登陆界面。他们的目标的相同的,提升用户体验。我的目标也这样。但是,这有时候,这并不一定提升了用户体验。为什么呢?

  想想,你是不是也曾出现过这样的状况:当时,你的网速并不快,你进入www.alipay.com的时候,还没有自动聚集,因为JS还没加载。但,你已经输入用户名了,并且已经在输入密码。好,打住。我们来讲个故事:很久很久以前,有个叫sofish,他当时挂着迅雷在下载XXX东西,急着想要用支付宝,当时页面还没有加载完,输入用户名后,正准备输入密码(习惯性地用键盘上的TAB键来切换到密码框),然后,抬头,当时,密码出现在输入用户名的框上,并且,旁边有一同学正在那里看着。

  你看,你看,难道,这样的自动聚焦提升了用户的所谓的体验么? 这里,就往往相反,可能导致用户要重新改密码(比如那个当时RP比较低下的叫sofish的家伙)。

  有什么方法可以解决么?当然!我们把上面的代码改装如下:

window.onload = function(){
 if(document.forms.length>0){
  for(i=0;i<document.forms[0].elements.length; i++){
   var oInput = document.forms[0].elements[i];
   if(oInput.type!="hidden" && oInput.value==""){
    oInput.focus();
    return;
   }
  }
 }
}

但是,这样一来,这个聚集就会自动跳到下一个非隐藏的input中,如果我正在输入,那不是很不爽? 嗯,当然不爽,所以,我们再折腾一下,做点小改正:

window.onload = function(){
 if(document.forms.length>0){
  for(i=0;i<document.forms[0].elements.length; i++){
   var oInput = document.forms[0].elements[i];
   if(oInput.type!="hidden" && oInput.value.length>0){
     oInput.blur();
     return;
   }else if(oInput.type!="hidden"){
    oInput.focus();return
    }
  }
 }
}

  由于在oInput.type!="hidden"中有一种情况,即当用户已经输入的时候,他会自动聚集到下一个,这样,也有问题,所以,我们让如果已经有输入的情况下,去掉所有input的焦点,而 else if中才让没有输入的用户自动对焦到第一个。(当然,如果有人习惯先输入密码,再输入用户名,那就再另想办法吧)。

  其实,这样,有时候好用,但有时候相当于根本不去自动聚焦。不过,对于保护用户的输入(特别是密码)来说,我想,用改进的方法,会比无改进的自动聚焦和根本不自动聚集来得好。当然,我相信,会有更好的方法。请不吝赐教。其他的就让我这个爱折腾的JS编程学院新生慢慢发现吧。

0
0

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻