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?
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?
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>
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.
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 ()
$('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>
Of course, if the structure were different maybe this would not work, but a small change would resolve accordingly.
// 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>
//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);"