javascript - 将焦点设置到下一个输入元素

Question

我有一个 Bootstrap 表单，我想在按下回车键后将焦点设置到下一个“启用”的输入元素。当我在 Barcode 输入元素中按下 Enter 时，我想将焦点设置到 Quantity 输入元素，因为它是下一个启用的输入元素。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="row">
     <div class="col-3 pr-0">
      <div class="form-group">
       <label for="txtBarcode">Barcode</label>
       <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">
      </div>
     </div>
     <div class="col-7 pl-2 pr-0">
      <div class="form-group">
       <label for="txtPartDesc">Description</label>
       <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>
      </div>
     </div>
     <div class="col-2 pl-2">
      <div class="form-group">
       <label for="txtUom">UoM</label>
       <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>
      </div>
     </div>
    </div>
    <div class="row">
     <div class="col-4 pr-0">
      <div class="form-group">
       <label for="txtQuantity">Quantity</label>
       <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">
      </div>
     </div>
    </div>

到目前为止我尝试过的是:

$(":input").keydown(function(event){
    if (event.keyCode === 13) {
        $(this).nextAll(':input:enabled').first().focus();
    }
});

但这并不像我预期的那样有效。

Answer 1

next()、nextAll() 和其他类似的方法用于查找 sibling 。由于您的输入都不是实际的 sibling ，因此这是行不通的。

但是你可以做的是:

1. 获取所有已启用输入的 jQuery 对象

   var enabledInputs = $("input:enabled");
   

2. 使用 index() 获取该 jQuery 对象中当前输入的索引

   var idx = enabledInputs.index(this);
   

3. 然后使用该索引使用 eq() 获取索引+1 处的元素

   enabledInputs.eq(idx+1).focus();
   

---

演示

$(":input").keydown(function(event){
    if (event.keyCode === 13) {
      var enabledInputs = $("input:enabled");
      var idx = enabledInputs.index(this);
      enabledInputs.eq(idx+1).focus()
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="row">
     <div class="col-3 pr-0">
      <div class="form-group">
       <label for="txtBarcode">Barcode</label>
       <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">
      </div>
     </div>
     <div class="col-7 pl-2 pr-0">
      <div class="form-group">
       <label for="txtPartDesc">Description</label>
       <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>
      </div>
     </div>
     <div class="col-2 pl-2">
      <div class="form-group">
       <label for="txtUom">UoM</label>
       <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>
      </div>
     </div>
    </div>
    <div class="row">
     <div class="col-4 pr-0">
      <div class="form-group">
       <label for="txtQuantity">Quantity</label>
       <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">
      </div>
     </div>
    </div>