捕捉 Tab 键导航

发布于 2024-08-08 23:44:10 字数 98 浏览 2 评论 0原文

当用户使用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

兮颜 2024-08-15 23:44:10

对于许多事件类型,可以使用事件委托,即在文档层次结构中向上冒泡时捕获某个包含元素上的事件,然后建立事件起源的元素。不幸的是,焦点模糊
change 事件不会冒泡。

然而,在实现标准 DOM 事件模型的 DOM 实现中,我们可以改为使用捕获阶段,该阶段会在事件向下到达将触发的元素的过程中拦截事件。

这在 Internet Explorer (IE) 中不起作用,即使在 IE8 中,它仍然没有标准事件模型的实现。但是,IE 有自己的 focusinfocusout 事件,这些事件冒泡。

最终的结果是,像往常一样,人们必须编写自己的代码,以便处理适当的浏览器的工作方式,以及 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, and
change 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 and focusout 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.

怎樣才叫好 2024-08-15 23:44:10

在表单元素上使用 onFocus 事件,因此

<form>
   <input id="fred" type="text" onFocus="alert('focused this');"/>
</form>

请查看 http: //www.w3.org/TR/html4/interact/scripts.html#adef-onfocus

use the onFocus event on the form elements, so

<form>
   <input id="fred" type="text" onFocus="alert('focused this');"/>
</form>

check out http://www.w3.org/TR/html4/interact/scripts.html#adef-onfocus

且行且努力 2024-08-15 23:44:10

有一些与焦点相关的 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文