有效的捕获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 相关文章推荐
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 Javascript
javascript时间差插件分享
Jul 18 Javascript
用iframe实现不刷新整个页面上传图片的实例
Nov 18 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 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版微信小店API二次开发及使用示例
2016/11/12 PHP
javascript学习网址备忘
2007/05/29 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
python 构造三维全零数组的方法
2018/11/12 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
车间班组长岗位职责
2013/11/13 职场文书
机电一体化自荐信
2013/12/10 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
创先争优活动个人总结
2015/03/04 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书