捕捉 Tab 键导航
当用户使用 Tab 键移动焦点时,我想捕获哪个元素处于焦点。例如,有一个表单,用户可以使用 Tab 键前进到下一个表单元素。我想知道当前焦点是哪个元素。
谢谢, 保罗
I want to catch which element is on focus when users use tab key to move their focus. For example, there is a form and users can use tab key to move forward to next form element. I'd like to know which element is the current on focus.
Thanks,
Paul
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
对于许多事件类型,可以使用事件委托,即在文档层次结构中向上冒泡时捕获某个包含元素上的事件,然后建立事件起源的元素。不幸的是,
焦点
、模糊
和change
事件不会冒泡。然而,在实现标准 DOM 事件模型的 DOM 实现中,我们可以改为使用捕获阶段,该阶段会在事件向下到达将触发的元素的过程中拦截事件。
这在 Internet Explorer (IE) 中不起作用,即使在 IE8 中,它仍然没有标准事件模型的实现。但是,IE 有自己的
focusin
和focusout
事件,这些事件会冒泡。最终的结果是,像往常一样,人们必须编写自己的代码,以便处理适当的浏览器的工作方式,以及 IE 的工作方式。
幸运的是,这是 quirksmode.org 的 ppk(又名 Peter-Paul Koch)已经完成艰苦工作的案例之一:他的文章 委派焦点和模糊事件应该告诉您需要了解的所有信息,并提供事件委派方式的简洁说明作品。
For many event types one can use event delegation, whereby one captures the event on some containing element as it bubbles up the document hierarchy, and then establishes the element on which the event originated. Unfortunately, the
focus
,blur
, andchange
events do not bubble.However, in DOM implementations that implement the standard DOM Events model, one can instead use the capture phase, which intercepts the event on its way down to the element where it will fire.
This doesn't work in (surprise, surprise) Internet Explorer (IE), which still doesn't have an implementation of the standard event model, even in IE8. However, IE has its own
focusin
andfocusout
events, which do bubble.The end result is that, as usual, one has to write one's code so as to deal with the way proper browsers work, and also with the way IE works.
Luckily this is one of those cases where ppk (aka Peter-Paul Koch) of quirksmode.org has already done the hard work: his article Delegating the focus and blur events should tell you all you need to know, as well as providing a succinct explanation of how event delegation works.
在表单元素上使用 onFocus 事件,因此
请查看 http: //www.w3.org/TR/html4/interact/scripts.html#adef-onfocus
use the onFocus event on the form elements, so
check out http://www.w3.org/TR/html4/interact/scripts.html#adef-onfocus
有一些与焦点相关的 JavaScript 事件。 onfocus 和 onblur(与焦点相反)事件可用于更新一个变量,该变量表示当前处于焦点的表单元素。
there are javascript events that are related to focus. The onfocus and onblur (opposite of focus) events can be used to update a variable that says which form element is currently in focus.