有效的捕获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 AnythingSlider滑动效果插件
Feb 07 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
Javascript中For In语句用法实例
May 14 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
srcElement表格样式
2006/09/03 Javascript
Javascript 不能释放内存.
2006/09/07 Javascript
jquery 经典动画菜单效果代码
2010/01/26 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
vue父组件向子组件传递多个数据的实例
2018/03/01 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
python使用SMTP发送qq或sina邮件
2017/10/21 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
python 遍历pd.Series的index和value
2019/11/26 Python
Python中过滤字符串列表的方法
2020/12/22 Python
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
Linux文件系统类型
2012/02/15 面试题
七一建党节慰问信
2015/02/14 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
Oracle11g R2 安装教程完整版
2021/06/04 Oracle