導讀：表單聚焦看似一個很小的功能，但也能提高網站的用戶體驗，當然用js實現十分簡單，本文主要從最基本開始分析如何制作表單自動聚焦的頁面。

在登陸界面中，通常，最重要的部分為登陸的form表。一個非常棒的提升體驗的做法是，在載入頁面時自動聚焦到第一個提供用戶輸入的表單框，讓用戶不用再多一個點擊，就可以輸入。這被很多網站采用。比如維基百科就是這樣：

當然，自動聚焦不僅僅適合在登陸界面，而適合在任何需要的界面。比如wordpress登陸后臺的界面和支付寶的登陸界面，都采用了自動聚焦的方法。

而具體應該是怎樣實現的呢？假設我們的表單如下：

我們要讓焦點落在id="usr"的input上，用 javascript 的方法，我們可以這樣做：

這里是當我們明確知道要在那個表單上添加 focus 的時候可以用的方法。這里，elements也可以用方括號的方法來獲取input表單，比如.elements[0]即為第一個input表單。當我們要聚焦的 input前面有type="hidden"的隱藏input，由于隱藏的input是不支持.focus的，一旦應用其上，就會出現javascript錯誤，要避免這樣的的錯誤。我們可以搜索第一個表單中，第一個非隱藏的 input，并給加上.focus：（除非你是想封裝起來，自動判斷，不然，最好不要用這個方法，多浪費資源啊，又if又for的）

到這里，很多網站都只做到這里，比如我前面提到的wordpress的登陸界面和支付寶的登陸界面。他們的目標的相同的，提升用戶體驗。我的目標也這樣。但是，這有時候，這并不一定提升了用戶體驗。為什么呢？

想想，你是不是也曾出現過這樣的狀況：當時，你的網速并不快，你進入www.alipay.com的時候，還沒有自動聚集，因為js還沒加載。但，你已經輸入用戶名了，并且已經在輸入密碼。好，打住。我們來講個故事：很久很久以前，有個叫sofish，他當時掛著迅雷在下載xxx東西，急著想要用支付寶，當時頁面還沒有加載完，輸入用戶名后，正準備輸入密碼（習慣性地用鍵盤上的tab鍵來切換到密碼框），然后，抬頭，當時，密碼出現在輸入用戶名的框上，并且，旁邊有一同學正在那里看著。

你看，你看，難道，這樣的自動聚焦提升了用戶的所謂的體驗么? 這里，就往往相反，可能導致用戶要重新改密碼（比如那個當時rp比較低下的叫sofish的家伙）。

有什么方法可以解決么？當然！我們把上面的代碼改裝如下：

但是，這樣一來，這個聚集就會自動跳到下一個非隱藏的input中，如果我正在輸入，那不是很不爽? 嗯，當然不爽，所以，我們再折騰一下，做點小改正：

由于在oinput.type!="hidden"中有一種情況，即當用戶已經輸入的時候，他會自動聚集到下一個，這樣，也有問題，所以，我們讓如果已經有輸入的情況下，去掉所有input的焦點，而 else if中才讓沒有輸入的用戶自動對焦到第一個。（當然，如果有人習慣先輸入密碼，再輸入用戶名，那就再另想辦法吧）。

其實，這樣，有時候好用，但有時候相當于根本不去自動聚焦。不過，對于保護用戶的輸入（特別是密碼）來說，我想，用改進的方法，會比無改進的自動聚焦和根本不自動聚集來得好。當然，我相信，會有更好的方法。請不吝賜教。其他的就讓我這個愛折騰的js編程學院新生慢慢發現吧。