在登陸界面中，通常，最重要的部分為登陸的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編程學院新生慢慢發現吧。