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

Posted 2023-03-17

【中文标题】仅在键盘选项卡后获取焦点元素

【英文标题】：Get focused element after a keyboard tab only

【发布时间】：2020-03-22 07:10:09

【问题描述】：

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

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

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

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

                
            );

【参考方案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>