Question

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

<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 =“add”）时，我会显示警告

Answer 1

在按键事件中，您可以使用$($('.tg')[$('.tg').index(this)+1]);获取包含课程tg的下一个项目。

这不包括按钮。要覆盖按钮，您必须将类tg添加到按钮。现在，如果焦点在按钮上，那么＆＃34;点击＆＃34;如果您按下＆＃34;输入＆＃34;将触发事件。键。如果您不想在＆＃34; Enter＆＃34;上触发点击事件。密钥，然后您可以使用以下代码段。

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

在Bootstrap行内单击“Enter”键执行“Tab”键操作

1 个答案: