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


Posted in Javascript onOctober 08, 2009

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(); 
};

参考浏览器内核处理流程图:
有效的捕获JavaScript焦点的方法小结
当浏览器第一次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焦点捕获相关的问题讨论就完成了.
Javascript 相关文章推荐
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
js实现select跳转功能代码
Oct 22 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 Javascript
Javascript isArray 数组类型检测函数
Oct 08 #Javascript
JavaScript 监听textarea中按键事件
Oct 08 #Javascript
jquery 最简单的属性菜单
Oct 08 #Javascript
Javascript 日期处理之时区问题
Oct 08 #Javascript
学习ExtJS table布局
Oct 08 #Javascript
学习ExtJS accordion布局
Oct 08 #Javascript
学习ExtJS form布局
Oct 08 #Javascript
You might like
PHP防止跨域提交表单
2013/11/01 PHP
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
利用JS实现浏览器的title闪烁
2013/07/08 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
详解angular如何调用HTML字符串的方法
2018/06/30 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
Python外星人入侵游戏编程完整版
2020/03/30 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
python字符串查找函数的用法详解
2019/07/08 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
python下载库的步骤方法
2019/10/12 Python
python中的逆序遍历实例
2019/12/25 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
什么是Smart Navigation?
2016/07/03 面试题
员工培训邀请函
2014/01/11 职场文书
班级聚会策划书
2014/01/16 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
交通事故和解协议书
2014/09/25 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
会计工作能力自我评价
2015/03/05 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
公司周年庆寄语
2019/06/21 职场文书
如何用JavaScipt测网速
2021/05/09 Javascript