如何检查 shift+tab 是否被按下？

Question

我的 UI 上有 3 个输入字段，其中一个是 readonly，所以在我的第一个输入字段中输入内容后，当我按下回车键时，它直接转到第三个可编辑的字段

我正在尝试的是当我在第三个输入字段并在那里按shift+tab 我想回到第一个可编辑的输入字段时，我在谷歌上尝试了很多东西但没有工作

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

Answer 1

readonly 上的tabindex="-1" 解决了这个问题

负值（通常 tabindex="-1"）表示该元素应该 可聚焦，但不应通过顺序键盘访问 导航。创建可访问的小部件最有用 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>

Answer 2

防止选择只读的答案： tabindex="-1"可以防止选择只读文本框，

如何检查tab 或shift + tab 按下 并且 Tab 功能可以很好地选择下一个元素，无需任何更改，如果我们想做一些特定的功能，例如单击特定按钮或触发特定功能或插件，那么我们必须操作 tab 功能。

所以我写了下面的代码，可能会有所帮助

FIY

当tab按下的键是9 当Shift+tab按下的键是16

享受代码， 乐于助人

  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>