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編程學院新生慢慢發現吧。