javascript - 使用 "Tab"单击执行 "Enter"键的操作，在 Bootstrap 行内

Question

我有一个 <div class = "row"></div>由Bootstrap提供，这一行有多个元素一个选择，两个按钮和多个输入。

<div class="row" id="productlist">
  <div class="col-md-6">
      <label>Producto</label><br/>
      <select class="select2_single form-control tg" id="product" name="product" size="4">
          <option>Seleccionar Producto</option>
          //PHP 
      </select>
      <br/>
      <button type="button" class="btn btn-default" id="print"><i class="fa fa-print"></i> Imprimir</button>
  </div>
  <div class="col-md-3">
      <label>Cantidad (Kilogramos)</label><br/>
      <input class="tg" type="text" placeholder="Cantidad" id="quantity" name="quantity"><br/>
      <label>Precio</label><br/>
      <input class="tg" type="text" placeholder="Precio" id="price" name="price"><br/>
      <label>Número de Rollos</label><br/>
      <input class="tg" type="text" placeholder="Número de Rollos" id="numrolls" name="numrolls"><br/>
  </div>
  <div class="col-md-3">
      <label>Observaciones</label><br/>
      <input class="tg" type="text" placeholder="Observaciones" id="remarks" name="remarks"><br/>
      <label>Número de Paquetes</label><br/>
      <input class="tg" type="text" placeholder="Número de Paquetes" id="numpackages" name="numpackages"><br/><br/>
      <button type="submit" class="btn btn-success fixedbutton" id="add">Agregar</button>
  </div>
</div>

我想执行与用户使用“Enter”时抛出“Tab 键”相同的操作，所以我制作了这个 jquery，问题可能是所有 div 都是多列，而不仅仅是一列。

 $('.tg').bind('keypress', function(event) {
  if(event.which === 13) {
    var nextItem = $(this).next('.tg');

    if( nextItem.size() === 0 ) {
      nextItem = $('.tg').eq(0);
    }
    nextItem.focus();
  }
});

此外，当输入为空并且用户单击添加按钮(id =“添加”)时，我会显示警报

Answer 1

在按键事件中，您可以使用 $($('.tg')[$('.tg').index(this)+1]); 获取具有类的下一个项目代码。

这不会涵盖按钮。要覆盖按钮，您必须将类 tg 添加到按钮。现在，如果焦点在按钮上，那么如果您按下“Enter”键，将触发“click”事件。如果您不想在“Enter”键上触发点击事件，那么您可以使用以下代码片段。

$('.tg').bind('keypress', function(event) {
  if(event.which === 13) {
    var nextItem = $($('.tg')[$('.tg').index(this)+1]);
    if( nextItem.size() === 0 ) {
      nextItem = $('.tg').eq(0);
    }

    if($(this).attr('type') =='button'){
        event.preventDefault();
    }
    nextItem.focus();
  }
});