在模态中保持制表符 - :first-child 和 :last-child 伪选择器关系

Question

当向前和向后点击标签时，我需要将焦点/标签保持在覆盖模式内并带有项目列表。

我正在处理这个答案：Keep tabbing within modal pane only

以下是我到目前为止的尝试：

$(function() {
    $("#show-overlay").on("click", function(){
        $("#overlay-navigation").toggle();
        $(this).text(function(i, text){
            return text === "Show Overlay" ? "Hide Overlay" : "Show Overlay";
        })
    });
  
    $('#overlay-navigation ul li:last-child').on('keydown', function (e) { 
      	if ($("this") && (e.which == 9)) {
            e.preventDefault();
            $('#overlay-navigation ul li:first-child').focus();
     	}
        if ($("#overlay-navigation ul li:first-child:focus") && (e.shiftKey && e.keyCode == 9)) {
            e.preventDefault();
            $('#overlay-navigation ul li:first-child').focus();
  	}
    });
});

#navigation li a {
  color: #000;
  text-decoration: none;
}

#overlay-navigation {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navigation">
  <ul>
    <li> <a href="">Item</a> </li>
    <li> <a href="">Item</a> </li>
    <li> <a href="">Item</a> </li>
    <li> <a href="">Item</a> </li>
  </ul>
</div>

<button id="show-overlay">Show Overlay</button>

<div id="overlay-navigation">
  <ul>
    <li> <a href="">Item</a> </li>
    <li> <a href="">Item</a> </li>
    <li> <a href="">Item</a> </li>
    <li> <a href="">Item</a> </li>
  </ul>
</div>

基本上，我在这里的思考过程与所附问题中最受好评的答案非常相似，当最后一个项目集中时，我可以将我的焦点保持在模态中回到第一个项目。但是，在该特定示例中，它不起作用。

我还需要能够向后切换（并检查如何查看是否按下了 shift 和 tab 键。我在这里的答案中学习了如何做到这一点：Is the shiftkey held down in JavaScript）以留在模态中，这与forwards基本相同，但向后如此：

if ($("#overlay-navigation ul li:first-child:focus") && (e.shiftKey && e.keyCode == 9)) {
    e.preventDefault();
    $('#overlay-navigation ul li:first-child').focus();
}

但是我发现它仍然向后逃避模态。

如何在覆盖模式内保持向前和向后的制表符？

Answer 1

if ($("this") 将始终为 true，因为这是一个 jquery 对象并且 this 使用不正确（它不是字符串）。

if ($("#overlay-navigation ul li:first-child:focus") - 这里也一样。是的，长度为 0 的对象。

li 在您的示例中无法获得焦点（尽管可以使用 tabindex），因此正确的焦点应该是这样的：$('#overlay-navigation ul li:first-child a').focus();

此外，它的编写不正确（您没有正确处理反向导航，因为您只收听keydown 最后一项）。

我已经制作了一个独立于列表的简单草图（它可能会即时修改，因此它会检查 last/first 每个触发器）。

$(function() {
  $("#show-overlay").on("click", function() {
    $("#overlay-navigation").toggle();
    $(this).text(function(i, text) {
      return text === "Show Overlay" ? "Hide Overlay" : "Show Overlay";
    })
  });

  $('#overlay-navigation ul li').on('keydown', function(e) {
    if (e.keyCode !== 9 || !$(this).is(':first-child') && !$(this).is(':last-child')) {
      return
    } // skip

    if ($(this).is(':first-child') && e.shiftKey) {
      e.preventDefault();
      $('#overlay-navigation ul li:last-child a').focus();
      return;
    }

    if ($(this).is(':last-child')) {
      if (e.shiftKey) {
        return
      } // skip
      e.preventDefault();
      $('#overlay-navigation ul li:first-child a').focus();
    }

  });
});

#navigation li a {
  color: #000;
  text-decoration: none;
}

#overlay-navigation {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navigation">
  <ul>
    <li> <a href="">Item</a> </li>
    <li> <a href="">Item</a> </li>
    <li> <a href="">Item</a> </li>
    <li> <a href="">Item</a> </li>
  </ul>
</div>

<button id="show-overlay">Show Overlay</button>

<div id="overlay-navigation">
  <ul>
    <li> <a href="">Item</a> </li>
    <li> <a href="">Item</a> </li>
    <li> <a href="">Item</a> </li>
    <li> <a href="">Item</a> </li>
  </ul>
</div>