使用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 相关文章推荐
JQuery UI皮肤定制
Jul 27 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
jQuery Easyui datagrid/treegrid 清空数据
Jul 09 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
AngularJS ionic手势事件的使用总结
Aug 09 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
javascript中数组的常用算法深入分析
Mar 12 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
Javascript Symbol原理及使用方法解析
Oct 22 Javascript
查找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
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
xml和web特殊字符
2009/04/28 Javascript
javascript 表单规则集合对象
2009/07/21 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
Python 随机生成中文验证码的实例代码
2013/03/20 Python
Python输出9*9乘法表的方法
2015/05/25 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
基于Python的PIL库学习详解
2019/05/10 Python
python函数与方法的区别总结
2019/06/23 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
公司前台接待岗位职责
2013/12/03 职场文书
高一物理教学反思
2014/01/24 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书