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

Javascript
JQuery的ajax基础上的超强GridView展示
js表格分页实现代码
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Tab页界面，用jQuery及Ajax技术实现
用jQuery技术实现Tab页界面之二
通过JS 获取Mouse Position(鼠标坐标)的代码
javascript 必知必会之closure
jquery ajax 登录验证实现代码
jQuery 使用手册(一)
jQuery 使用手册(二)
jQuery 使用手册(三)
jQuery 使用手册(五)
用Javascript 获取页面元素的位置的代码
网页自动跳转代码收集
JS 连锁泡泡 v1.1
javascript的onchange事件与jQuery的change()方法比较
jquery 模式对话框终极版实现代码
javascript 页面划词搜索JS
javascript String split方法误操作
一个JS小玩意 几个属性相加不能超过一个特定值.

No. « 227 228 229 230 »

技术文章搜索

关键字

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

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