how to add class to elements only when tab focus using jQuery

Question

I need to add a css class to elements focused by tab key. I'm able to do this with focusin and focusout events using jquery.

But I don't need to add the class when focus using mouse click. How can I achieve this? Below is my code


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

Thank you in advance...

Perhaps you're looking for something like this? https://stackoverflow.com/a/16145062/9340890 — Pirate, Dec 29 '21 at 08:27
Does this answer your question? [Detect focus initiated by tab key?](https://stackoverflow.com/questions/16144611/detect-focus-initiated-by-tab-key) — Pirate, Dec 29 '21 at 08:30
I'd go with the answer provided by @Pirate - but instead of alert or checking the element, just raise a new, custom event, eg `if (code == 9) $(e.target).trigger("tabbed")` then listen for `tabbed` event on the inputs you want it on. http://jsfiddle.net/g89njr3e/ — freedomn-m, Dec 29 '21 at 08:49
@Pirate Thank you, I have gone through the links. I need to add class to all the controls in the page when focus using tab key, not only for particular control and that code is working (focus in and focus out). But when I use mouse for focusing an element I don't need to add any class. Can we write keydown and keyup, instead of focusin and focusout?? — Tron Bekker, Dec 29 '21 at 09:23

Yiğit ESEN · Answer 1 · 2021-12-29T09:26:08.133

0

$(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>

edited Dec 29 '21 at 09:26

answered Dec 29 '21 at 08:34

Yiğit ESEN

1
2

Hi! I made your answer an interactive snippet (`[<>]` button). It is nice but has a minor bug: If you Shift-Tab to go backwards the "focused" class disappears as soon as I release Shift. At least in Chrome this is the case. Can you make it work for any element and not a specific one with that ID? – Peter Krebs Dec 29 '21 at 08:47
@PeterKrebs Thanks; I need to add class to all the controls in the page when focus using tab key, not only for particular control and that code is working (focus in and focus out). But when I use mouse for focusing an element I don't need to add any class. Can we write keydown and keyup, instead of focusin and focusout?? – Tron Bekker Dec 29 '21 at 09:25
Okay nvm post is closed because [Detect Focus initiated by Tab key](https://stackoverflow.com/questions/16144611/detect-focus-initiated-by-tab-key) has a good answer there. – Peter Krebs Dec 29 '21 at 10:34

how to add class to elements only when tab focus using jQuery

1 Answers1