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

时间：2018-11-11 06:22:35

标签： javascript jquery

我有一个引导程序窗体，在该窗体上，我想按Enter键将焦点设置到下一个“启用”的输入元素。当我在“条形码”输入元素中按Enter键时，由于它是下一个启用的输入元素，因此我想将焦点设置在“数量”输入元素上。

<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();
    }
});

但是，这不符合我的预期。

3 个答案:

答案 0 :(得分：3)

next()，nextAll()和其他类似方法用于查找同级。由于您的输入都不是实际的兄弟姐妹，因此将无法使用。

但是您可以做的是：

  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>

答案 1 :(得分：0)

下一个输入不是#barcode输入的同级，因此nextAll在那时将不起作用。尝试导航到父级的父级，div class="col-，然后然后使用nextAll递归搜索该父级的同级，直到找到匹配的元素：

$(":input").keydown(function(event) {
  if (event.keyCode !== 13) return;
  $(this)
    .parent()
    .parent() // get to the `class=col-#` element
    .nextAll(':input:enabled')
    .first()
    .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>

答案 2 :(得分：0)

如果我正确理解了您的问题，那么该问题的一种解决方案是像这样更新您的keydown()处理程序：

  if (event.keyCode === 13) {

      // Get all enabled inputs in the document
      var inputs = $('input:enabled');

      // Iterate all inputs, searching for the index of the "next" input to "this"
      for(var i = 0; i < inputs.length; i++) {

        // If the "global" index of "this" input is found
        if( $(inputs).eq(i).is( $(this) ) ) {

          // Then select the "next" input by incrementing the index, and call
          // focus on that input if it exists
          inputs.eq(i + 1)
          .css({ border : '1px solid red' }) // Added to help visualise focus, remove this line 
          .focus();

          // Exit the loop now that focus has been called on "next" input
          break
        }
      } 
    }

这里的想法是根据它们在DOM中出现的顺序选择下一个输入元素，而不是根据与按下“输入”的输入相邻的同级来选择下一个输入元素。此解决方案还纠正了代码选择器语法中的一些小错误。这是一个工作示例：

$("input").keydown(function(event){
 
    if (event.keyCode === 13) {
     
      var inputs = $('input:enabled');
      
      for(var i = 0; i < inputs.length; i++) {
        if( $(inputs).eq(i).is( $(this) ) ) {
          inputs.eq(i + 1)
          .css({ border : '1px solid red' }) // Added to help visualise focus, remove this line 
          .focus()
          break
        }
      } 
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/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>

相关问题
最新问题