时间戳

首页 > 解决方案 > 无法使用 jQuery 使输入行为作为选项卡

javascript - 无法使用 jQuery 使输入行为作为选项卡

问题描述

我想在“Buscar”输入上按 Enter 键并关注第一个输入（“Qtd on the table”）。

我试过 $(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>

标签： javascriptjqueryhtml

解决方案

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

您可以做的是观察输入的回车键，并专注于名称为 quantidade 的第一个输入。请参阅下面的第一个函数。

$('#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>

推荐阅读