有效的捕获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 相关文章推荐
JavaScript 在各个浏览器中执行的耐性
Apr 06 Javascript
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
JavaScript执行顺序详细介绍
Dec 04 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
javascript 通过键名获取键盘的keyCode方法
Dec 31 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 Javascript
微信小程序设置滚动条过程详解
Jul 25 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实现小型站点广告管理(修正版)
2006/10/09 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
PHP中的self关键字详解
2019/06/23 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
IE中createElement需要注意的一个问题
2010/07/13 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
推荐8款jQuery轻量级树形Tree插件
2014/11/12 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
python带参数打包exe及调用方式
2019/12/21 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
Nike瑞士官网:Nike CH
2021/01/18 全球购物
团支书的期末学习总结自我评价
2013/11/01 职场文书
个人查摆剖析材料
2014/02/04 职场文书
市级三好学生评语
2014/12/29 职场文书
第一节英语课开场白
2015/06/01 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python
Javascript之datagrid查询详解
2021/09/15 Javascript
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL