How to jump to the next field using jQuery?

Question

How to move focus to the next field of a table using jQuery? I have a table with the fields Id, Name and Price, the price column is a text input.

How to implement a feature for when the user presses the key Enter jump to the next line field?

Answer 1

Explanation

Using the method on jquery, passing the selector #table, I added a Handler, for when the event keyup is triggered by an input it performs my anonymous function.

if(event.which == 13) Checks if the key Enter was pressured.

var generico = $("#tabela").find('input:visible'); Find all inputs that are visible.

var indice = generico.index(event.target) + 1; Get the index of input that triggered the event and increases +1, because I want the next index.

var seletor = $(generico[indice]).focus(); Focus on the next field.

if(seletor.length == 0) If not, keep your focus on the current element.

---

Observing: In my selector I searched for all inputs that are within my table but if you only want text inputs, you can use: find('input:text:visible');

Remember that this solution can be used for any type of element (e.g. table, form, div, etc).

---

$('#tabela').on('keyup', 'input', function(event) {
  if (event.which == 13) {
    var generico = $("#tabela").find('input:visible');
    var indice = generico.index(event.target) + 1;
    var seletor = $(generico[indice]).focus();

    if (seletor.length == 0) {
      event.target.focus();
    }
  }
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover" id="tabela">
  <thead>
    <tr>
      <th>Id</th>
      <th>Nome</th>
      <th>Preço</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Moto Maxx™</td>
      <td>R$
        <input type="text" value="2.199,00">
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Novo Moto X™</td>
      <td>R$
        <input type="text" value="1.499,00">
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>Novo Moto G™</td>
      <td>R$
        <input type="text" value="729,00">
      </td>
    </tr>
  </tbody>
</table>

Answer 2

I particularly prefer simple and straightforward solutions, so I believe this can be solved this way by assigning an event .keyup() from jQuery in the inputs would solve the situation.

$('input').keyup(function(e){
    if (e.keyCode == 13){
        $(this).parent().parent().next().find('td input').focus();
    }
});

Simple as that.

---

Explanation:

This event should address whether the user clicked the Enter(keycode=13) and then he would just take the parent() of parent()

<tr>        //$(this).parent().parent()
  <td>      //$(this).parent()
    <input> //$(this)

and move on to the next using method .next() to jQuery:

<tr>        //$(this).parent().parent()
  <td>      //$(this).parent()
    <input> //$(this)
<tr>        //$(this).parent().parent().next()
  <td>      
    <input> 

And then finally I would find using the .find() by jQuery the input of <tr> current:

<tr>        //$(this).parent().parent()
  <td>      //$(this).parent()
    <input> //$(this)
<tr>        //$(this).parent().parent().next()
  <td>      
    <input> //$(this).parent().parent().next().find('td input')

Having the element in hand, just use the .Focus() from jQuery

Functional example

$('input').keyup(function(e){
    if (e.keyCode == 13){
        $(this).parent().parent().next().find('td input').focus();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover" id="tabela">
  <thead>
    <tr>
      <th>Id</th>
      <th>Nome</th>
      <th>Preço</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Moto Maxx™</td>
      <td>R$
        <input type="text" value="2.199,00">
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Novo Moto X™</td>
      <td>R$
        <input type="text" value="1.499,00">
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>Novo Moto G™</td>
      <td>R$
        <input type="text" value="729,00">
      </td>
    </tr>
  </tbody>
</table>

Observing:

Of course if the structure were different maybe this wouldn’t work, but a small change would solve accordingly.

Answer 3

//Vai para próxima linha da tabela, no input da 4ª coluna ao dar enter
function func_proximo($lin_tb) 
{
    if(event.keyCode==13)
    {
        var $tbl = document.getElementById('tb_assoc');
        $tbl.rows[$lin_tb + 1].cells[3].children[0].focus();
    }
}
No input da tabela coloque:
onKeyDown="func_proximo(this.parentNode.parentNode.rowIndex, 8);"

Answer 4

//Another example:

<script language= "javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jQuery-1.7.2.min.js">
</script>

<script language="javascript" type="text/javascript">

$(document).ready
(function(e) 

{

 $('input').keydown( 
function(e) 

{ 

var key = e.charCode ? e.keyCode : e.keycode ? e.keycode : 0;

if (key == 13) 

{

e.preventDefault();
var inputs = $(this).closest('form').find(':input:visible');

inputs.eq(inputs.index(this)+1).focus();

}

if (key == 38)

{

e.preventDefault();

var inputs = $(this).closest('form').find(':input:visible');

ipunts.eq(inputs.index(this)-1).focus();

}
}
); 

}
);

</script>

</htlml>