JavaScript 元素焦点捕获与处理技巧

使元素获取焦点的方法

元素获取焦点的主要优势在于允许接收键盘事件。HTML 中许多元素默认具备可聚焦特性，例如表单元素和锚链接，但大部分元素默认状态下无法聚焦。要使元素能够聚焦，可以通过 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';

解决事件处理中聚焦失效问题

有时通过 JavaScript 设置了元素聚焦，但最终焦点并未落在该元素上，这常令人困惑。

问题在于，如果在可聚焦元素的事件处理函数中尝试聚焦其他元素，聚焦操作可能会失败。这是因为如果当前事件是可获得焦点的事件（如 mouse、keydown、keypress 等），在这些事件的处理函数内直接聚焦其他元素通常会无效。

 
oDiv.onmousedown = function(){
document.getElementById('ipt').focus();
}; 

参考浏览器内核处理流程图：

当浏览器第一次执行 Reflow（回流）后，焦点虽然停留在另一个元素上，但 Reflow 返回后，事件处理的默认操作将继续执行，即聚焦到事件源（也就是触发 mousedown 的元素）。此时引发第二次 Reflow，当 Reflow 完成后，焦点重新聚在该元素上。因此，在事件处理函数中的聚焦操作变得无效。

是否有解决方法？答案是肯定的。从流程图中可以看出，只要将聚焦操作放到第二次 Reflow 之后执行即可。这可以利用 setTimeout 方法将代码延迟放入队列，待后续再执行。由于 JavaScript 引擎是单线程的，图中整个过程是连续执行的，JS 引擎在此期间没有空闲。当上述所有操作完成后，定时回调才有机会被执行。因此可以采用以下代码：

 
oDiv.onmousedown = function(){
setTimeout(function(){
document.getElementById('ipt').focus();
}, 0);
}; 

由上可知，即使将 setTimeout 的毫秒数设为 0，也能达到预期效果。

处理 IE 下聚焦不可见元素的异常

3. 聚焦时抛出异常的处理

在 IE 浏览器中，如果尝试聚焦不可见元素，会抛出一个异常。在许多应用中，我们往往不对元素是否可见进行测试就直接聚焦，因为即使这样通常也没什么问题（谁说不可见元素不可以聚焦？）。因此，在 IE 下可以使用 try{}catch(){} 来忽略这个异常。

 
try{
element.focus();
}catch(e){}

到此，与 JavaScript 焦点捕获相关的问题讨论就完成了。