如何仅在使用jQuery的选项卡焦点时向元素添加类[重复]答案

【问题标题】：how to add class to elements only when tab focus using jQuery [duplicate]如何仅在使用jQuery的选项卡焦点时向元素添加类[重复]
【发布时间】：2021-12-29 08:20:41
【问题描述】：

我需要为 tab 键聚焦的元素添加一个 css 类。我可以使用 jquery 来处理 focusin 和 focusout 事件。

但我不需要在使用鼠标单击焦点时添加类。我怎样才能做到这一点？下面是我的代码


 $('#main-nav').focusin(
        function () {
            $(this).find('.submenu').addClass('focused');
        }
    );
    $('#main-nav').focusout(
        function () {
            $(this).find('.submenu').removeClass('focused');
        }
    );

提前谢谢你...

【问题讨论】：

也许您正在寻找这样的东西？ stackoverflow.com/a/16145062/9340890
这能回答你的问题吗？ Detect focus initiated by tab key?
我会选择 @Pirate 提供的答案 - 但不是警告或检查元素，而是引发一个新的自定义事件，例如 if (code == 9) $(e.target).trigger("tabbed") 然后在输入你想要它。 jsfiddle.net/g89njr3e
@Pirate 谢谢，我已经浏览了链接。当使用 Tab 键聚焦时，我需要为页面中的所有控件添加类，不仅针对特定控件并且该代码正在工作（聚焦和聚焦）。但是当我使用鼠标聚焦元素时，我不需要添加任何类。我们可以写 keydown 和 keyup，而不是 focusin 和 focusout？？

标签： javascript jquery asp.net

【解决方案1】：

$(window).keyup(function(e) {
  var pressedKey = (e.keyCode ? e.keyCode : e.which);
  if (pressedKey == 9 && $('.something').is(':focus')) {
    $('.something').each(function() {
      $(this).removeClass('focused');
    });
    $('.something:focus').addClass('focused');
  } else if (pressedKey == 16 && pressedKey == 9 && $('.something').is(':focus')) {
    var pressedKey = (e.keyCode ? e.keyCode : e.which);
    if (pressedKey == 9 && $('.something').is(':focus')) {
      $('.something').each(function() {
        $(this).removeClass('focused');
      });
      $('.something:focus').addClass('focused');
    }
  }
});

body {
  margin: 0;
  padding: 0;
}

input {
  display: block;
  margin: 10px;
  font-size: 20px;
  background-color: #efefef;
}

.focused {
  background-color: #a0a;
}

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <form>
    <input class="something" name="foo">
    <input class="something" name="bar" id="somethingWaitingForFocus">
    <input class="something" name="baz">
  </form>
</body>

</html>

【讨论】：

嗨！我将您的答案设为交互式 sn-p（[<>] 按钮）。这很好，但有一个小错误：如果你用 Shift-Tab 向后退，“焦点”类会在我释放 Shift 时消失。至少在 Chrome 中是这样的。你能让它适用于任何元素，而不是具有该 ID 的特定元素吗？
@PeterKrebs 谢谢；当使用 Tab 键聚焦时，我需要为页面中的所有控件添加类，不仅针对特定控件并且该代码正在工作（聚焦和聚焦）。但是当我使用鼠标聚焦元素时，我不需要添加任何类。我们可以写 keydown 和 keyup，而不是 focusin 和 focusout？？
好的 nvm 帖子已关闭，因为 Detect Focus initiated by Tab key 那里有一个很好的答案。