JavaScript讓登入或搜尋文字框自動獲得焦點
這確實是個值得注意的細節，今天在XX網站登入介面上遇到了，就先記錄下來了，每個網頁都有其專注的功能，有的專注於文章資訊等資訊呈現，有的專注於視訊播放，有的專注於登入，今天要說的就是專注於像登入或搜尋等類似功能的網頁，開啟這一類頁面，你會發現有些做得比較好的頁面，輸入焦點會自動落在要填寫資訊的第一個文字框裡，這樣我們就不需要再點選滑鼠讓此類文字框獲得焦點了，這樣無形中為使用者減少了一步點滑鼠的操作，易用性就顯著增強了，當然這類效果都是由JavaScript指令碼實現的，具體的實現方式也很簡單，即使用Obj.focus()方法，使Obj物件獲取焦點，但是在實際操作中還是有很多方面需要注意的。
首先，我們要獲取文字框物件，這就註定了我們這段指令碼必須在文字框渲染完成後才執行，參考多數登入框的設計方案，這類指令碼一般都是放在HTML的最後部分，位置在</body>之前，這樣在input載入完成後才執行指令碼，避免找不到物件的問題。
其次，Obj.focus()方法需要延時呼叫，並不等於說我們input文字框呈現出來就可以立即設定focus焦點，大部分情況下這樣做也許可以成功，但是多測試幾次你會發現有時焦點並不能成功設定，這裡的原因是某些瀏覽器在input文字框渲染完成後不能立即為文字框啟用獲得焦點的特性，所以我們需要做一定的延時，在JavaScript裡延時的方式是通過setTimeout函式，時間設定大概在200毫秒即可（參考WordPress的後臺登入）。
最後，即使我們採用延時等措施，仍然會有小几率的情況導致無法獲取焦點甚至讓指令碼執行出錯，所以我們需要用try {} catch {} 遮蔽錯誤，無法獲取焦點是小事，指令碼出錯就坑爹了。下面是實現的程式碼：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
後來發現WP的登入頁面除了focus還有select方法，原來在使用者名稱記住的情況下，使用者名稱文字框獲得焦點後如果我們要清除原先的使用者名稱，只有移動方向鍵或者使用滑鼠選中然後刪除，而select正好替我們做了選中這個事情，要輸入就直接輸入就行了，以上面的HTML為參考，具體的程式碼如下：
1 2 3 4 5 6 7 |
|
END