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中学会了如何做到这一点），基本上与向前但向后相同，所以：

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>

保持制表符内的制表符-：first-child和：last-child伪选择器关系

1 个答案: