使用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 相关文章推荐
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
JS通过相同的name进行表格求和代码
Aug 18 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
使用store来优化React组件的方法
Oct 23 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 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
咖啡的植物学知识
2021/03/03 咖啡文化
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
vue.js计算属性computed用法实例分析
2018/07/06 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
python制作抽奖程序代码详解
2021/01/15 Python
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
亚运会口号
2014/06/20 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
秋菊打官司观后感
2015/06/03 职场文书
离婚民事起诉状
2015/08/03 职场文书
岗位聘任协议书
2015/09/21 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
Go语言并发编程 sync.Once
2021/10/16 Golang