当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 有效的捕获JavaScript焦点的方法小结

Javascript
jQuery开发者都需要知道的5个小技巧
Extjs学习笔记之六 面版
Javascript 中的类和闭包
IE6下JS动态设置图片src地址问题
Extjs学习笔记之七 布局
Extjs学习笔记之八 继承和事件基础
Extjs TriggerField在弹出窗口显示不出问题的解决方法
JavaScript中的集合及效率
利用js获取服务器时间的两个简单方法
在html页面上拖放移动标签
了解jQuery技巧来提高你的代码
JavaScript 页面坐标相关知识整理
Javascript UrlDecode函数代码
JQuery 遮罩层实现(mask)实现代码
jQuery 页面 Mask实现代码
Javascript的构造函数和constructor属性
js或css文件后面跟参数的原因说明
将CKfinder整合进CKEditor3.0的新方法
jQuery UI-Draggable 参数集合
jQuery 行级解析读取XML文件（附源码）

No. « 259 260 261 262 »

技术文章搜索

关键字

Javascript 中的 有效的捕获JavaScript焦点的方法小结

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 675 ::
收藏到网摘: 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焦点捕获相关的问题讨论就完成了.