无法使jQuery表现为选项卡

时间：2019-03-15 19:07:36

标签： javascript jquery html

我想在“ Buscar”输入上按回车键，然后专注于第一个输入（“桌上的Qtd”）。

我尝试过 $（this）.nextAll（'input'）。first（）。focus（）;

$（this）.next（'input：text'）。focus（）;

我在这里和在线上找到了很多解决方案和其他代码，但是没有任何效果。我在控制台上没有收到任何错误，这使得发现我所缺少的内容变得更加困难。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<!doctype html>
<html>

<head>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>

<body style="padding-top: 70px;">

  <div class="container-fluid">
    <div class="row">
      <div class="col-6">
        <center>
          <div class="form-group has-feedback">
            <input type="text" class="form-control" name="busca" id="busca" onclick="this.select()" placeholder="Buscar">
          </div>
        </center>
        <table class="table table-striped">
          <thead class="thead-dark">
            <th class="w-50">Material</th>
            <th>Unidade</th>
            <th>Quantidade</th>
            <th class="w-25">Preço</th>
            <th>Qtd</th>
          </thead>
          <tbody class="resultado" id="lista">
            <tr id="row1">
              <td style="display:none;">1</td>
              <td>Adesivo Instantâneo Almasuper 100g</td>
              <td>Galão</td>
              <td>64</td>
              <td>R$ 20,00</td>
              <td>
                <div class="qtd" style="width: 60px;">
                  <input id="1" type="text" class="form-control" name="quantidade">
                </div>
              </td>
            </tr>
            <tr id="row4">
              <td style="display:none;">4</td>
              <td>Batente Silicone Adesivo 12mm com 25</td>
              <td>Cartela</td>
              <td></td>
              <td>R$ 6,50</td>
              <td>
                <div class="qtd" style="width: 60px;">
                  <input id="4" type="text" class="form-control" name="quantidade">
                </div>
              </td>
          </tbody>
        </table>
      </div>
    </div>

2 个答案:

答案 0 :(得分：0)

首先，您不应该设置数字ID。其次，buscar没有兄弟姐妹，因此您不能说nextAll，因为他们不是兄弟姐妹。

您可以做的是观察输入的Enter键，并专注于名称为id的第一个输入。请参阅下面的第一个功能。 

$('#busca').on('keyup', function(e){
    if(e.which === 13){
        $('input[name="quantidade"]').first().focus();
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<!doctype html>
<html>

<head>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>

<body style="padding-top: 70px;">

  <div class="container-fluid">
    <div class="row">
      <div class="col-6">
        <center>
          <div class="form-group has-feedback">
            <input type="text" class="form-control" name="busca" id="busca" placeholder="Buscar">
          </div>
        </center>
        <table class="table table-striped">
          <thead class="thead-dark">
            <th class="w-50">Material</th>
            <th>Unidade</th>
            <th>Quantidade</th>
            <th class="w-25">Preço</th>
            <th>Qtd</th>
          </thead>
          <tbody class="resultado" id="lista">
            <tr id="row1">
              <td style="display:none;">1</td>
              <td>Adesivo Instantâneo Almasuper 100g</td>
              <td>Galão</td>
              <td>64</td>
              <td>R$ 20,00</td>
              <td>
                <div class="qtd" style="width: 60px;">
                  <input id="1" type="text" class="form-control" name="quantidade">
                </div>
              </td>
            </tr>
            <tr id="row4">
              <td style="display:none;">4</td>
              <td>Batente Silicone Adesivo 12mm com 25</td>
              <td>Cartela</td>
              <td></td>
              <td>R$ 6,50</td>
              <td>
                <div class="qtd" style="width: 60px;">
                  <input id="4" type="text" class="form-control" name="quantidade">
                </div>
              </td>
          </tbody>
        </table>
      </div>
    </div>

答案 1 :(得分：0)

// get all the inputs that are not disabled and not hidden
var $allInputs = $(':input:not(:disabled):not(:hidden)');

$('#busca').on('keyup', function(e){
  // if enter was pressed
  if ((e.keyCode || e.which) === 13) {
    // cancel any form submit that might happen
    e.preventDefault();
    
    // focus on the input that is the next index after the index that busca has
    $allInputs.eq( $allInputs.index(this) + 1 ).focus();
  }
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-6">
      <center>
        <div class="form-group has-feedback">
          <input type="text" class="form-control" name="busca" id="busca" onclick="this.select()" placeholder="Buscar">
        </div>
      </center>
      <table class="table table-striped">
        <thead class="thead-dark">
          <th class="w-50">Material</th>
          <th>Unidade</th>
          <th>Quantidade</th>
          <th class="w-25">Preço</th>
          <th>Qtd</th>
        </thead>
        <tbody class="resultado" id="lista">
          <tr id="row1">
            <td style="display:none;">1</td>
            <td>Adesivo Instantâneo Almasuper 100g</td>
            <td>Galão</td>
            <td>64</td>
            <td>R$ 20,00</td>
            <td>
              <div class="qtd" style="width: 60px;">
                <input id="1" type="text" class="form-control" name="quantidade">
              </div>
            </td>
          </tr>
          <tr id="row4">
            <td style="display:none;">4</td>
            <td>Batente Silicone Adesivo 12mm com 25</td>
            <td>Cartela</td>
            <td></td>
            <td>R$ 6,50</td>
            <td>
              <div class="qtd" style="width: 60px;">
                <input id="4" type="text" class="form-control" name="quantidade">
              </div>
            </td>
        </tbody>
      </table>
    </div>
  </div>

相关问题
最新问题