Question

我的UI上有3个输入字段，其中一个是readonly，因此当我按Enter键在第一个输入字段中输入内容后，它会直接转到可编辑的第3个输入字段

我要尝试的是当我在第3个输入字段中并按shift+tab时，我想回到第一个可编辑的输入字段，我已经在Google上尝试了很多东西，但没有用

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

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

2 个答案: