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

原文链接: Get the Focused Element with JavaScript
原文日期: 2014年3月19日
翻译日期: 2014年3月21日
翻译人员: 铁锚

对于良好的用户体验来说,网站/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。总而言之,我对它很满意,觉得它非常可靠!

转载于:https://www.cnblogs.com/lanzhi/p/6467027.html

使用JS取得焦点(focus)元素相关推荐

js之焦点图轮播特效
js之焦点图轮播特效一.原理介绍焦点图在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思,只不过加上了图片.据国外的设计机构调查统计,网站焦点图的点击率明显高于纯文字.在很多购物网主页面 ...
html tab focus,tabindex解决div获得焦点focus()和失去焦点blur()的问题
tabindex解决div获得焦点focus()和失去焦点blur()的问题首先要说的是,默认情况下div标签是没有获得焦点focus()和失去焦点blur()两个事件的. 如果想要div可以拥有获 ...
JS事件与操作元素--世纪佳缘（用户名、显示隐藏内容）--黑马程序员pink老师JS第P25-操作元素总结及作业1
需求:利用JS事件与操作元素复刻--世纪佳缘(用户名.显示隐藏内容). 开发环境:VScode.Edge 参考网站:世纪佳缘官网注册截面头部包含算法: 1.利用JS操作元素.事件以及if分支,修改表 ...
表单焦点: focus/blur
表单焦点: focus/blur 当用户点击或按TAB键时元素会获得焦点.也有autofocusHtml属性可以设置元素获取默认焦点,当页面载入或其他方式. 获得焦点通常意味:准备在这里接受数据.所以 ...
2）JS动态生成HTML元素的爬取
2)JS动态生成HTML元素的爬取 import java.util.List;import org.openqa.selenium.By; import org.openqa.selenium.We ...
html设置根rem,经过js动态设置根元素的rem方案
rem目前是响应式开发移动端一个很重要也是经常使用的一个元素,可是在网上看的各类文章都会超级懵逼.因此我在下面给出两个方案,也列举出使用方法,让你们一目了然.前提是设计稿以750为准.其中测试的设计稿 ...
JS动态生成的元素，其对应的方法不响应（比如单击事件，鼠标移动事件等）...
主要原因:在页面给元素注册点击事件的时候[ $(function () { XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效解决方法: 方案一:js动态生成元素后再给 ...
js实现焦点进入文本框内关闭输入法:imeMode
js实现焦点进入文本框内关闭输入法:imeMode 2011-05-26 11:23 要用到的东西: imeMode:xxx 有四个参数 active 代表输入法为中文 inactive 代表输入法为 ...
js动态生产html元素,js 动态创建 html元素
js 动态创建 html元素 js学习之动态创建html元素 body{margin:0;padding:0;} .sky{background:#000;width:1000;height:500p ...

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

使用JS取得焦点(focus)元素相关推荐

最新文章

热门文章