js 键盘上Tab键，进行切换焦点时，这个事件执行的是哪个方法

Posted 2023-05-03

js 键盘上Tab键，进行切换焦点时，这个事件执行的是哪个方法，因为我想用js手动触发Tab事件，模拟一个这个事件吧，但是发现不大可取，就想知道发生这个事件时，执行的是什么方法，想通过js直接执行这个方法来实现Tab事件

参考技术A 执行的是onkeyDown事件
onkeyDown事件里面可以使用 keyCode获取键码 进行控制 参考技术B 没有这个事件
但是可以用html标签的tabindex 来改变默认顺序追问

哎，设置这个顺序没用的，我不是要做这个！怎么会没有这个事件的，那浏览器是怎么支持这个事件的啊？

追答

不太清楚为什么没有，但是你可以监听tab键的keycode这样来实现

参考技术C 这个没做过，不过写好整个表单之后，不用设置。直接tab就能切换焦点的吧。提交按钮的话直接给个type=“submit”按回车就能自动提交表单。 参考技术D onfocus()追问

我要的不是这个事件，ok！？

第5个回答  2018-04-21 你可以往一批标签里添加同一个 name 属性，然后在 js 里选中这些带有此 name 的标签，添加键盘事件监听并循环执行 focus()，个人觉得此方法还略优于 Tab，因为可以指定可选中标签

如何在键盘可访问性焦点上关闭汉堡菜单

【中文标题】如何在键盘可访问性焦点上关闭汉堡菜单

【英文标题】：How to close hamburger menu on keyboard accessibility focus out

【发布时间】：2021-08-15 14:16:29

【问题描述】：

我正在尝试在我的一个网站中为盲人实现键盘可访问性。我的网站上有一个汉堡菜单。使用键盘上的“Tab”键导航时，焦点将移至此汉堡菜单项。单击“Enter”时，它会展开，再次按“Tab”键时，它会在打开的汉堡菜单元素中导航。一旦到达最后一个项目，它将专注于内容。

在这种情况下，一旦用户使用键盘“Tab”键按下，是否可以关闭汉堡菜单？

以https://www.impressivewebs.com/demo-files/hamburger-menu/ 为例。对焦后可以关闭侧边菜单吗？

【问题讨论】：

请在此处发布您的代码以供审核。我查看了您的网址，我可以看到出现的导航菜单有一个无序列表，但没有任何必需的角色，并且打开的导航不在导航元素中，它在 main 中，我认为这很令人困惑但不会失败我在上面运行的 SiteImprove chrome 扩展测试。有关更多信息，请参见此处：w3.org/WAI/tutorials/menus/application-menus。并添加跳转链接直接进入页面主要内容并跳转菜单：w3.org/TR/WCAG20-TECHS/G1

【参考方案1】：

简答

这是可能的，但这不是一个好主意。 您最好使用经典的切换按钮。

更长的答案

对于盲人来说，专注于做某事本质上意味着它会在没有通知的情况下发生。它可能难以理解，充其量只是混淆的来源。 在标签导航中连续到达的元素及其顺序不应在没有明确有意识的用户操作的情况下发生变化。

如果菜单出现和消失的方式不是对称的（在您的情况下，显式按下回车键而不是聚焦），那就更令人困惑了。 两者都应该是对称的。这意味着，是否：

同一个按钮可以打开和关闭菜单 离开链接时菜单显示在菜单之前（焦点进入），离开菜单的最后一项时消失（焦点离开）

实施第二个有几个重要的缺点：

选项卡并不是屏幕阅读器用户在页面上导航的唯一方式。这具体意味着菜单可能无缘无故无法访问，并且可能没有任何方法可以使其显示。 仅使用键盘且有视力的用户可能会对菜单的意外出现/消失感到惊讶 从技术上讲，它并不像看起来那么容易：您必须从两个方向（tab 和 shift+tab）考虑它

切换按钮没有这些问题。正确实施，它总是可达的，由用户明确触发并具有可预测的行为。 此外，它的实现要简单得多。

总而言之，经典的切换按钮因此是迄今为止最简单、最安全的解决方案，无论是对您还是对各种用户而言。

【讨论】：

如果切换按钮打开类似模式的菜单，您认为将菜单切换按钮与菜单项放在相同的选项卡/shift+选项卡循环中会更好还是焦点循环？从最后一个菜单项到第一个菜单项，用户应该只是猜测按 Esc 退出循环？当焦点位于菜单切换按钮中时，这将改变选项卡的位置，具体取决于按钮是否被按下。

事实上，最好的办法是两者兼而有之：对转义作出反应并在菜单中设置按钮，这样您就可以覆盖从新手到高级用户的整个范围。但是，如果你必须选择其中一个，逃避是很常见的，所以我会说两者都可以接受。请注意，当按下 Escape 时，焦点应该返回到切换按钮。