這確實是個值得注意的細節，今天在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 |
<!DOCTYPE html>
<html>
<head>
<title>文本框獲取焦點</title>
</head>
<body>
<p>
<input type="text" id="userName" />
</p>
<script type="text/javascript">
setTimeout( function(){
try{
document.getElementById('userName').focus();
} catch(e){}
}, 200);
</script>
</body>
</html> |
后來發現WP的登錄頁面除了focus還有select方法，原來在用戶名記住的情況下，用戶名文本框獲得焦點后如果我們要清除原先的用戶名，只有移動方向鍵或者使用鼠標選中然后刪除，而select正好替我們做了選中這個事情，要輸入就直接輸入就行了，以上面的HTML為參考，具體的代碼如下：
1 2 3 4 5 6 7 |
setTimeout( function(){
try{
var t = document.getElementById('userName');
t.focus();
t.select();
} catch(e){}
}, 200); |