Can't make enter behave as tab with jQuery

Question

I want to press enter on the 'Buscar' input and focus on the first input ( 'Qtd on the table').

I tried $(this).nextAll('input').first().focus();

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

And a lot of solutions and other codes I found here and online but nothing worked. I didn't get any errors on the console which makes it harder to find out what I'm missing.

<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>

`Buscar` has no siblings. It is the only child of the `.has-feedback` div — Taplar, Mar 15 '19 at 19:10

score 0 · Accepted Answer · answered Mar 15 '19 at 19:15

First, you shouldn't be setting numerical ids. Second, buscar has no siblings so you can't say nextAll because they aren't any siblings.

What you can do is watch the input for an enter key up and focus on the first input with the name quantidade. See the first function below.

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

It worked, thanks. I'll change the ids, but why is using just numbers as id a bad practice? — Jean Morrison, Mar 15 '19 at 19:21
It HTML4 it was a hard requirement that you couldn't use a number only as an id. It required you to have an AZaz character in there. With HTML5 you can do it though its typically not the best idea. See: [Valid HTML ID attribute values](https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html) — basic, Mar 15 '19 at 19:25

score 0 · Answer 2 · answered Mar 15 '19 at 19:16

// 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>

Can't make enter behave as tab with jQuery

2 Answers2