How to check shift+tab is pressed?

Question

I have 3 input fields on my UI as in which one of them is readonly so after entering something in my first input field when I press enter it goes directly to 3rd one which is editable

What I am trying is when I am in 3rd Input field and there I press shift+tab I want to go back to first Input field which is editable, I have tried many things on google but not working

$(document).keypress(function(event) {
  var keycode = event.keyCode || event.which;
  if (keycode == '13') {
    if (event.target.matches('[name=hsnCodeInput]')) {
      $("#mbqInput").focus();
    }

  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="row">
  <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
    <label for="hsnCodeInput">HSN Code</label> <input type="text" class="form-control" id="hsnCodeInput" name="hsnCodeInput">
  </div>
  <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
    <label for="searchCodeInput">Search Code</label> <input type="text" class="form-control" id="searchCodeInput" name="searchCodeInput" readonly="readonly">
  </div>
  <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
    <label for="mbqInput">MBQ</label> <input type="text" min="0" class="form-control" id="mbqInput" name="mbqInput">
  </div>
</div>

Possible duplicate of [what is the key code for shift+tab?](https://stackoverflow.com/questions/3044083/what-is-the-key-code-for-shifttab) — Wimanicesir, Jul 10 '19 at 07:13
Try using `tabindex="-1"` on your readonly field. It should be removed from the tabbing cycle — James Hay, Jul 10 '19 at 07:14
Possible duplicate of [Capture "shift+tab" keypress event](https://stackoverflow.com/questions/6421936/capture-shifttab-keypress-event) — Alive to die - Anant, Jul 10 '19 at 07:14

score 3 · Accepted Answer · answered Jul 10 '19 at 07:15

tabindex="-1" on readonly solves this problem

A negative value (usually tabindex="-1") means that the element should be focusable, but should not be reachable via sequential keyboard navigation. It's mostly useful to create accessible widgets with JavaScript.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="row">
  <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
    <label for="hsnCodeInput">HSN Code</label> <input type="text" class="form-control" id="hsnCodeInput" name="hsnCodeInput">
  </div>
  <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
    <label for="searchCodeInput">Search Code</label> <input type="text" class="form-control" id="searchCodeInput" name="searchCodeInput" tabindex="-1" readonly="readonly">
  </div>
  <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
    <label for="mbqInput">MBQ</label> <input type="text" min="0" class="form-control" id="mbqInput" name="mbqInput">
  </div>
</div>

score 2 · Answer 2 · answered Jul 10 '19 at 07:42

Answer to prevent select readonly: tabindex="-1" can prevent to select readonly textbox,

How to check tab or shift + tab pressed and Tab feature is working fine to select next element, without any changes, and if we want to do some specific functions like, to click specific button or trigger specific function or plugin, then we have to manipulate the tab feature.

So for that I write following code, might help

FIY

When tab pressed key is 9 When Shift+tab pressed key is 16

Enjoy the code, Happy to help

  document.addEventListener('keyup', function(event){
  var keycode = event.keyCode || event.which;
  if (keycode === 9) {
    // tab pressed
    alert('Tab pressed')

  }

  if (keycode === 16) {
      // tab + shift pressed

      alert('Tab + Shift pressed')
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="row">
  <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
    <label for="hsnCodeInput">HSN Code</label> <input type="text" class="form-control" id="hsnCodeInput" name="hsnCodeInput">
  </div>
  <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
    <label for="searchCodeInput">Search Code</label> <input type="text" class="form-control" id="searchCodeInput" name="searchCodeInput" readonly="readonly" tabindex="-1">
  </div>
  <div class="form-group col-xs-6 col-sm-6 col-md-6 col-lg-2">
    <label for="mbqInput">MBQ</label> <input type="text" min="0" class="form-control" id="mbqInput" name="mbqInput">
  </div>
</div>

hey have you check it is not working for combination of keys like `alt+s` or `shift+tab` — vivek singh, Jul 11 '19 at 05:32
Yes, because I didn't write code for `Alt` + `S`. I write only for `Tab` and `Tab + Shift` and its working fine — Dupinder Singh, Jul 11 '19 at 05:35
nop `tab+shift` is also not working anyway I found how to handle special key events — vivek singh, Jul 11 '19 at 05:38

How to check shift+tab is pressed?

2 Answers2