使用键盘上的标签的下一个标签（Bootstrap）

Question

我是Bootstrap的初学者。当我按Tab键时，我想选择下一个标签。

单击loan_form.php，然后光标自动显示在贷款名称中。完成并按键盘上的Tab键后，光标将移至部门标签，而不是设备代码标签：

<div class="row">                        
<div class="col-md-6 mb-3">
  <label>* Loan Name</label>
  <input type="text" class="form-control" name="loan_name" id="loan_name" placeholder="Full Name" required>
</div>

<div class="col-md-6 mb-3">
  <label>Device Code</label>
  <select name="device_code" class="form-control" id="device_code" data-validetta="required" ></select>
</div>
</div>
<br />

<div class="row">
<div class="col-md-6 mb-3">
  <label>* Department</label>
  <input type="text" class="form-control" name="dept" id="dept" placeholder="Department" required></div>

<div class="col-md-6 mb-3">
  <label>Brand</label>
  <input type="text" class="form-control" name="device_brand" id="device_brand" placeholder="Brand" disabled required>

</div>

  

Answer 1

在所有tabindex字段中使用input html标记。请在此处查看重新格式化的代码：

<div class="row">                        
<div class="col-md-6 mb-3">
  <label>* Loan Name</label>
  <input type="text" class="form-control" name="loan_name" id="loan_name" placeholder="Full Name" required tabindex="1">
</div>

<div class="col-md-6 mb-3">
  <label>Device Code</label>
  <select name="device_code" class="form-control" id="device_code" data-validetta="required" tabindex="2"></select>
</div>
</div>
<br />

<div class="row">
<div class="col-md-6 mb-3">
  <label>* Department</label>
  <input type="text" class="form-control" name="dept" id="dept" placeholder="Department" required tabindex="3"></div>

<div class="col-md-6 mb-3">
  <label>Brand</label>
  <input type="text" class="form-control" name="device_brand" id="device_brand" placeholder="Brand" disabled required tabindex="4">
</div>