JavaScript - JQuery - 焦点（）方法 - 无限循环

我试图建立一个功能，允许两个按钮（CodePen下面）之间的键盘选项卡。更具体地说，我希望用户能够在“button1”标签上跳转到“button2”，然后在标签上跳回到按钮1.JavaScript - JQuery - 焦点（）方法 - 无限循环

我的解决方案是将一个事件监听器放在“button1 “并听取选项卡键盘事件。当触发时，使用JQuery的focus（）方法将焦点转移到“button2”。在“button2”上有一个相同的监听器，用于监听标签事件并将焦点移回“button1”。

问题是，当我标签到“button1”时，监听器记录焦点和制表符事件，并将焦点移到“button2”，然后记录焦点和制表符事件并再次将其移回“button1”，创建一个无限循环。

请问如何解决这个问题的建议？

这个的真实世界应用将限制特定模块或页面部分中的Tab键。

谢谢！史蒂夫

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);

来源

2017-06-16 Steve Liu

也许你可以调用焦点之前设置一个布尔值（），并且如果设置了其他按钮，不要运行该事件？ – xunatai

您正在使用错误的事件。你想捕获keydown或按键。检查键码的事件处理程序，如果它是制表键，则使用焦点。 – Bindrid

感谢您指出！我已经更新了代码。问题仍然是当我在“button1”上触发事件时，“button2”上的事件也会被触发。 –

你想限制两个按钮之间的标签导航。

请注意，它不会限制screenreaders导航到这两个按钮。

你必须考虑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(); 
    } 
    } 
}

来源

2017-06-16 07:45:45 Adam

我想你正在尝试做的，可以实现与HTML的tabindex物业要容易得多。如果您只想限制标签到某些元素，您可以为tabindex="-1"设置那些您不想要关注的元素。

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

来源

2017-06-16 01:00:26

JavaScript - JQuery - 焦点（）方法 - 无限循环

回答

相关问题