Je veux appuyer sur Entrée sur l'entrée 'Buscar' et me concentrer sur la première entrée ('Qtd sur la table').

J'ai essayé $(this).nextAll('input').first().focus();

$(this).next('input:text').focus();

Et beaucoup de solutions et d'autres codes que j'ai trouvés ici et en ligne mais rien n'a fonctionné. Je n'ai eu aucune erreur sur la console, ce qui rend plus difficile la recherche de ce qui me manque.

<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>
0
Jean Morrison 15 mars 2019 à 22:07

2 réponses

Meilleure réponse

Tout d'abord, vous ne devriez pas définir d'identifiants numériques. Deuxièmement, buscar n'a pas de frères et sœurs, vous ne pouvez donc pas dire suivantTous car ils ne sont pas frères et sœurs.

Ce que vous pouvez faire, c'est regarder l'entrée d'une touche Entrée et vous concentrer sur la première entrée avec le nom quantidade. Voir la première fonction ci-dessous.

$('#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>
0
basic 15 mars 2019 à 19:15
// 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>
0
Taplar 15 mars 2019 à 19:16