使用JS取得焦点(focus)元素代码


Posted in Javascript onMarch 22, 2014

对于良好的用户体验来说,网站/web app的可访问性和可用性,以及功能 都是至关重要的。
当我们的网站运行良好/体验很好的时候,用户是意识不到的,但我们做得不好时他们肯定会感觉到。 应用程序的可用性和可访问性的一个重要组成部分是输入焦点(focus)的处理,但这又是开发人员常常会忽视的一点。

对输入焦点处理很差的一个例子: 在点击一个链接以后打开一个窗口,但却不将光标聚焦到窗口中的任何元素内。 甚至更糟的是: 聚焦到模态窗口中的某个元素,但在关闭以后焦点照样不返回。 理想情况下,在触发链接时会保存一个引用,然后将光标聚焦到新窗口,并在窗口关闭时把光标重新移回去。

但假如你不知道输入光标现在在哪个元素上怎么办? 通过 document.activeElement 属性我们可以取得当前文档中获得焦点的元素!

The JavaScript

使用 document.activeElement 来查找当前选中的元素是很容易的事:

var focusedElement = document.activeElement; /* 比如某个示例: 
var triggerElement = document.activeElement; 
myModal = new MyModal({ 
onOpen: function() { 
this.container.focus(); 
}, 
onClose: function() { 
triggerElement.focus(); 
} 
}); 
*/

这个属性不仅在常规输入元素上可用,包括表单字段或 <a> 标签链接,而且只要设置了 tabIndex 属性的任意元素都是可用的。

我喜欢 document.activeElement 的原因是,不需要使用事件监听或委托监听器来追踪记录下那个元素获得了焦点 —— 您可以随时获取这个属性。 当然在使用这样的特性之前你应该做大量的测试—— 是否在跨浏览器或竞态条件下出什么BUG。 总而言之,我对它很满意,觉得它非常可靠!

Javascript 相关文章推荐
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
js运动框架_包括图片的淡入淡出效果
May 11 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
JavaScript如何自定义trim方法
Jul 28 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
详解JS函数防抖
Jun 05 Javascript
vue组件的路由高亮问题解决方法
May 11 Vue.js
查找Oracle高消耗语句的方法
Mar 22 #Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 #Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 #Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 #Javascript
js获得网页背景色和字体色的方法
Mar 21 #Javascript
页面装载js及性能分析方法介绍
Mar 21 #Javascript
Js冒泡事件详解及阻止示例
Mar 21 #Javascript
You might like
PHP4实际应用经验篇(7)
2006/10/09 PHP
用PHP和ACCESS写聊天室(十)
2006/10/09 PHP
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
JavaScript 特殊字符
2007/04/05 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
javascript实现yield的方法
2013/11/06 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
javascript基本算法汇总
2016/03/09 Javascript
Json解析的方法小结
2016/06/22 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
js删除数组中的元素delete和splice的区别详解
2018/02/03 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
bpython 功能强大的Python shell
2016/02/16 Python
基础的十进制按位运算总结与在Python中的计算示例
2016/06/28 Python
TensorFlow实现卷积神经网络
2018/05/24 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
解决keras,val_categorical_accuracy:,0.0000e+00问题
2020/07/02 Python
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
公司会计岗位职责
2014/02/13 职场文书
房屋出租协议书
2014/04/10 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
工程质检员岗位职责
2015/04/08 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
导游词之镇江焦山
2019/11/21 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python