|
|
元素聚焦最大好處就是可允許發(fā)送鍵盤事件，HTML很多元素默認(rèn)就有可聚焦，如form表單元素，a錨鏈接等，但大部份默認(rèn)是不能聚焦的。要使得元素能夠聚焦，可以在HTML代碼或JavaScript腳本中實(shí)現(xiàn)。
html:
復(fù)制代碼 代碼如下:
<div tabIndex="0" style="height:100px;width:100px; background:red;"></div>
JavaScript:
oDiv.tabIndex = 0;
其中tabIndex是TAB鍵的導(dǎo)航順序，可有正，負(fù)或零。
當(dāng)元素獲得焦點(diǎn)時(shí)會有邊框指示，如果想不顯示這個(gè)邊框，可以
html:
復(fù)制代碼 代碼如下:
<div tabIndex="0" hidefocus="on" ></div>
JavaScript:
oDiv.hideFocus = ‘on';
2. 元素明明設(shè)置了聚焦卻沒效果
有時(shí)用JavaScript設(shè)置了元素聚焦，但最后焦點(diǎn)卻不落在該元素上，百思不得其解。
問題在于如果在可焦點(diǎn)元素的事件處理函數(shù)中聚焦其它元素，就有可能聚不了焦點(diǎn)，因?yàn)槿绻撌录莻€(gè)可獲得焦點(diǎn)的事件，如mouse, keydow(keypress)等等，在這些事件的處理函數(shù)內(nèi)直接聚焦其它元素是失敗的。
復(fù)制代碼 代碼如下:
oDiv.onmousedown = function(){
document.getElementById('ipt').focus();
};
參考瀏覽器內(nèi)核處理流程圖:
當(dāng)瀏覽器第一次Reflow回流后,焦點(diǎn)停在另一個(gè)元素上,但回流返回后,事件處理后默認(rèn)的操作將繼續(xù)執(zhí)行,那就是聚焦到事件源,也就是mousedown的元素,這時(shí)引發(fā)第二次回流,當(dāng)回流后焦點(diǎn)聚在該元素上.所以在事件處理函數(shù)中的聚焦變得無效.
有沒解決方法? 答案是肯定的. 由圖可知,只要把聚焦放到第二個(gè)Reflow回流之后執(zhí)行即可.這個(gè)可利用setTimeout方法作延遲先放進(jìn)隊(duì)列等后再執(zhí)行.因?yàn)橛捎?a href=/itjie/Javajishu/ target=_blank class=infotextkey>JavaScript引擎單線程特性,圖上整個(gè)過程都是連著執(zhí)行的,該過程中JS引擎一直沒有空閑過,當(dāng)上面所有操作都完成后并后,定時(shí)回調(diào)才有機(jī)會被執(zhí)行.所以可以:
復(fù)制代碼 代碼如下:
oDiv.onmousedown = function(){
setTimeout(function(){
document.getElementById('ipt').focus();
}, 0);
};
由上可知,最后那個(gè)毫秒數(shù)即使設(shè)為0也沒關(guān)系.
3. 聚焦時(shí)拋出異常的
在IE中,當(dāng)元素不可見時(shí)如果聚焦的話,會拋出一個(gè)異常,因?yàn)樵诤芏?a href=/pingce/yingyong/ target=_blank class=infotextkey>應(yīng)用中我們往往不再對元素是否不可見作測試就聚焦了,因?yàn)榧词惯@樣也沒什么問題(誰說不可見元素就不可以聚焦的?)..所以,在IE下可用try{}catch(){}來忽略這個(gè)異常.
復(fù)制代碼 代碼如下:
try{
element.focus();
}catch(e){}
到此,與JavaScript焦點(diǎn)捕獲相關(guān)的問題討論就完成了.
JavaScript技術(shù)：有效的捕獲JavaScript焦點(diǎn)的方法小結(jié)，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。
