Question

我正在尝试构建一个允许两个按钮之间键盘标签的功能（下面的CodePen）。更具体地说，我希望用户能够在“button1”和选项卡上进行选项卡，跳转到“button2”，然后在选项卡上跳回到按钮1。

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

问题在于，当我选中“button1”时，监听器会记录焦点和制表符事件，并将焦点移到“button2”上，然后“button2”会记录焦点和制表符事件并再次将其移回“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

我认为使用HTML中的tabindex属性可以更轻松地实现您要做的事情。如果您只想将标签限制为某些元素，可以为那些您不想重点关注的元素设置tabindex="-1"。

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

Answer 2

您希望限制两个按钮之间的标签导航。

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

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

JavaScript - JQuery - focus（）方法 - 无限循环

2 个答案: