仅在键盘选项卡后获取焦点元素

Question

我正在尝试将一个类设置为特定元素，该元素在用户点击键盘选项卡后获得焦点以实现可访问性目的。单击鼠标不应该具有相同的效果。当用户选择给定元素时，应该只发生类更改。

我的问题是我可以捕获选项卡事件，但它似乎只捕获用户正在关闭的元素，而不是选项卡。

这是我的代码，只是尝试显示被标签到的元素的类，但这会显示页面上前一个元素的类：

            $(document).keydown(function(e) {
                if (e.keyCode == 9) {
                    //e.preventDefault();
                    alert($("*:focus").attr('class'));

                }
            });

Answer 1

Keydown 是您按下 Tab 键的位置，Keyup 是您释放 Tab 键的位置，因此您应该改用 keyup()。

其次，如果这仅适用于表单，则显式使用输入来捕获释放键的元素。

这是一个示例代码：

$('#frm input').keyup(function(e) {
    if (e.keyCode == 9) {
      //Remove the class from all inputs
      $('#frm input').removeClass('selected');

      //Add the class to the element where tab key was released
      $(this).addClass('selected');
    }
  });

.selected {
  background-color: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="frm">
  <Label>First Name: <input id="fname"></Label><br>
  <Label>Middle Name: <input id="mname"></Label><br>
  <Label>Last Name: <input id="lname"></Label>
</form>