JavaScript - JQuery - focus() method - infinite loop

Question

我正在尝试构建一个允许两个按钮之间的键盘制表符的功能(下面的CodePen)。更具体地说，我希望用户能够按 Tab 键转到"button1"，然后在选项卡上跳转到"button2"，然后在选项卡上跳回按钮 1。

我的解决方案是将事件侦听器放在"button1"上并侦听选项卡键盘事件。当触发时，使用 JQuery 的 focus() 方法将焦点转移到 "button2"。在"button2"上，有一个相同的侦听器，它侦听选项卡事件并将焦点移回"button1"。

问题是，当我按 Tab 键转到"button1"时，侦听器会记录焦点和 tab 键事件，并将焦点转移到"button2"上，后者又会记录焦点和 tab 键事件，并再次将其移回"button1"，从而创建一个无限循环。

我可以得到如何解决这个问题的建议吗？

它的实际应用是限制页面的特定模块或部分中的选项卡。

谢谢！ 史蒂夫

https://codepen.io/steveliu7/pen/WOoMJY

var $button1 = $('.b1');
var $button2 = $('.b2');
var checkButton = function(event) {
if ($button1.is(':focus') && event.which === 9){
console.log($(this))
$('.b2').focus();
return;
};
if ($button2.is(':focus') && event.which === 9){
console.log($(this))
$('.b1').focus();
return;
};
}
$('button').on('keydown', checkButton);

Answer 1

您希望限制两个按钮之间的选项卡导航。

请注意，它不会将屏幕阅读器导航限制为这两个按钮。

你必须考虑TAB导航，但也要考虑SHIFT+TAB导航

从纯技术的角度来看event.preventDefault()这就是您正在寻找的：

var checkButton = function(event) {
if (event.which === 9) {
if ($button1.is(':focus')) {
$button2.focus();
event.preventDefault();
} else if ($button2.is(':focus')){
$button1.focus();
event.preventDefault();
}
}
}

Answer 2

我认为使用 HTML 中的tabindex属性可以更轻松地实现您正在尝试做的事情。如果要将制表符限制为仅某些元素，则可以为那些不希望聚焦的元素设置tabindex="-1"。

来源： https://www.w3schools.com/tags/att_global_tabindex.asp