有效捕獲JavaScript焦點的方法小結

1. 設定元素可獲得焦點以監聽鍵盤事件
元素聚焦最大好處就是可允許發送鍵盤事件，HTML很多元素預設就有可聚焦，如form表單元素，a錨連結等，但大部份預設是不能聚焦的。要使得元素能夠聚焦，可以在HTML代碼或JavaScript指令碼中實現。
html: 複製代碼 代碼如下:<div tabIndex="0" style="height:100px;width:100px; background:red;"></div>

JavaScript:
oDiv.tabIndex = 0;
其中tabIndex是TAB鍵的導航順序，可有正，負或零。
當元素獲得焦點時會有邊框指示，如果想不顯示這個邊框，可以
html: 複製代碼 代碼如下:<div tabIndex="0" hidefocus="on" ></div>

JavaScript:
oDiv.hideFocus = ‘on';
2. 元素明明設定了聚焦卻沒效果
有時用JavaScript設定了元素聚焦，但最後焦點卻不落在該元素上，百思不得其解。
問題在於如果在可焦點元素的事件處理函數中聚焦其它元素，就有可能聚不了焦點，因為如果該事件是個可獲得焦點的事件，如mouse, keydow(keypress)等等，在這些事件的處理函數內直接聚焦其它元素是失敗的。 複製代碼 代碼如下:oDiv.onmousedown = function(){
document.getElementById('ipt').focus();
};

參考瀏覽器核心處理流程圖:

當瀏覽器第一次Reflow迴流後,焦點停在另一個元素上,但迴流返回後,事件處理後預設的操作將繼續執行,那就是聚焦到事件來源,也就是mousedown的元素,這時引發第二次迴流,當迴流後焦點聚在該元素上.所以在事件處理函數中的聚焦變得無效.

有沒解決方案? 答案是肯定的. 由圖可知,只要把聚焦放到第二個Reflow迴流之後執行即可.這個可利用setTimeout方法作延遲先放進隊列等後再執行.因為由於JavaScript引擎單線程特性,圖上整個過程都是連著執行的,該過程中JS引擎一直沒有空閑過,當上面所有操作都完成後並後,定時回調才有機會被執行.所以可以: 複製代碼 代碼如下:oDiv.onmousedown = function(){
setTimeout(function(){
document.getElementById('ipt').focus();
}, 0);
};

由上可知,最後那個毫秒數即使設為0也沒關係.

3. 聚焦時拋出異常的
在IE中,當元素不可見時如果聚焦的話,會拋出一個異常,因為在很多應用中我們往往不再對元素是否不可見作測試就聚焦了,因為即使這樣也沒什麼問題(誰說隱藏元素就不可以聚焦的?)..所以,在IE下可用try{}catch(){}來忽略這個異常. 複製代碼 代碼如下:try{
element.focus();
}catch(e){}

到此,與JavaScript焦點捕獲相關的問題討論就完成了.