本文介绍在 JavaScript 中使非表单元素获取焦点的方法，包括通过 tabIndex 属性或 JS 设置。重点解析在鼠标或键盘事件处理函数中直接调用 focus() 导致聚焦失效的原因，并给出使用 setTimeout 延迟执行的有效解决方案。此外，还讨论了 IE 浏览器中聚焦不可见元素抛出异常的兼容性问题及处理建议。
使元素获取焦点的方法
元素获取焦点的主要优势在于允许接收键盘事件。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';
2. 元素明明设置了聚焦却没效果
解决事件处理中聚焦失效问题
有时通过 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 焦点捕获相关的问题讨论就完成了。