JavaScript tab key code | Handling Tab Keypress example

JavaScript tab key code is 9. Use keydown event to get the tab key code or char code in JavaScript.

Detect tab key and code example

HTML example code, Capturing TAB key in JS. After launch coding pressing a tab key until main window in focus.

<!DOCTYPE html>
<html>
<body>

  <script>
    
    window.addEventListener('keydown', function(event) {
      const key = event.key;
      alert(key);
    });
  </script>

</body>
</html>

Output:

JavaScript tab key code

Q: How to detect “tab keypress” when the focus is on a button using JavaScript?

Answer: Use the below code with trans-browser compatibility. Detect the tab keypress on a button and focus on the specified textbox when the tab is pressed.

<!DOCTYPE html>
<html>
<body>
  <input ID="btnClear" onkeydown="return goToFirst();"/> 
  <button>Click...</button> <br>
  <input id="txtFirstName" type="text">

  <script>
    function goToFirst(evt) {
      var e = event || evt; 
      var charCode = e.which || e.keyCode;

      console.log(charCode);
      if (charCode == 9 ) {
        document.getElementById('txtFirstName').focus();
        document.getElementById('txtFirstName').select();
      }

      return false;
    };
  </script>

</body>
</html>

Output: By default focus should be on button.

Handling Tab Keypress example

Do comment if you have any doubts and suggestions on this JS keycode topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.