繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 有效的捕获JavaScript焦点的方法小结
- Javascript
- Jquery实战_读书笔记2 选择器
- JQuery 确定css方框模型（盒模型Box Model）
- jQuery 入门级学习笔记及源码
- 被jQuery折腾得半死，揭秘为何jQuery为何在IE/Firefox下均无法使用
- JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
- JQuery 构建客户/服务分离的链接模型中Table中的排序分析
- JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
- JavaScript 学习笔记（十四） 正则表达式
- JQuery 操作Javascript对象和数组的工具函数小结
- 用JS写的一个TableView控件代码
- JQuery 1.4 中的Ajax问题
- window.onbeforeunload方法在IE下无法正常工作的解决办法
- 优化javascript的执行速度
- jQuery 1.4 15个你应该知道的新特性(译)
- js 模拟实现类似c#下的hashtable的简单功能代码
- setTimeout与setInterval在不同浏览器下的差异
- php gethostbyname获取域名ip地址函数详解
- JavaScript 未结束的字符串常量常见解决方法
- document.getElementById为空或不是对象的解决方法
- javascript中利用数组实现的循环队列代码
Javascript 中的 有效的捕获JavaScript焦点的方法小结
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 593 ::
收藏到网摘: n/a
阅读本文可理解并解决以下问题 设置元素可获得焦点以监听键盘事件 某个元素明明设置了聚焦却没效果 聚焦时抛出异常的 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焦点捕获相关的问题讨论就完成了.
评论 (0) All
