How to jump to the next field using jQuery?

13

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

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

    
asked by anonymous 20.11.2014 / 15:04

4 answers

15

Explanation

Using the on method of JQuery, by passing the #tabela selector, I added a handler, for when the keyup event is triggered by an input it performs my anonymous function.

if(event.which == 13) Checks if the Enter key has been pressed.

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

var indice = generico.index(event.target) + 1; Gets the input index that triggered the event and increments +1, since I want the next index.

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

if(seletor.length == 0) If it does not find, it keeps the focus on the current element.

Note: In my selector I made the search for all the inputs that are inside my table but if you only want the text inputs, you can use: find('input:text:visible');

Remembering that this solution can be used for any type of element (eg 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><tableclass="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>
    
20.11.2014 / 15:19
3

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

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

Simple like that.

Explanation:

This event should treat if the user clicked the Enter (keyCode = 13) and then it would just get the parent() from parent()

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

and would move to the next using jQuery's .next () method :

<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 () of 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 jQuery .focus ()

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><tableclass="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>

Note:

Of course, if the structure were different maybe this would not work, but a small change would resolve accordingly.

    
20.11.2014 / 18:55
1

// Another example:

<script language= "javascript" type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jQuery-1.7.2.min.js"></script><scriptlanguage="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>
    
09.07.2016 / 16:47
1
//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);"
    
16.09.2016 / 18:47