網頁制作Poluoluo文章簡介：表單自動聚焦的JS代碼分析.
導讀：表單聚焦看似一個很小的功能，但也能提高網站的用戶體驗，當然用JS實現十分簡單，本文主要從最基本開始分析如何制作表單自動聚焦的頁面。
在登陸界面中，通常，最重要的部分為登陸的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==0){
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編程學院新生慢慢發現吧。