Focus on next input field inside table with enter key press

Question

I need to move in to the next input field inside a table with many rows using enter key press. I try this :

$(function() {

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

});

Why dont work ? :(

HTML

<table class="half">
  <tr>
  <td>Nome :</td>
  <td><input name="ragsoc" type="text" id="ragsoc" value=""/></td>
  <td>Mnemo:</td>
  <td><input name="mnemo" type="text" id="mnemo" value=""/></td>
  <td>Partita IVA :</td>
  <td><input name="piva" type="text" id="piva" value=""/></td>
  </tr>
  <tr>
  <td>Nome :</td>
  <td><input name="ragsoc" type="text" id="ragsoc" value=""/></td>
  <td>Mnemo:</td>
  <td><input name="mnemo" type="text" id="mnemo" value=""/></td>
  <td>Partita IVA :</td>
  <td><input name="piva" type="text" id="piva" value=""/></td>
  </tr>
 </table>

This code work fine but only in the first row of table :

$('input').keydown(function (e) {
    if (e.which === 13) {
    $(this).closest('td').nextAll().eq(1).find('input').focus()
    }
 });

What is wrong or missing ?

try `$(this).nextAll('.inputs:first').focus()` – David Fregoli Jan 20 '14 at 17:35 — David Fregoli, Jan 20 '14 at 17:35
Without seeing the html, any answer is a best a guess. – Jason P Jan 20 '14 at 17:36 — Jason P, Jan 20 '14 at 17:36

score 16 · Accepted Answer · edited Oct 07 '18 at 08:12

Assuming .inputs is a sibling of your current element. .find() searches in descendants of current element(this)

 $('.inputs').keydown(function (e) {
    if (e.which === 13) {
       $(this).next('.inputs').focus();
    }
 });

You need to use .closest(), .nextAll()

 $('.inputs').keydown(function (e) {
    if (e.which === 13) {
        $(this).closest('td').nextAll().eq(1).find('.inputs').focus();

        //OR
        //$(this).closest('td').next().next().find('.inputs').focus()
    }
 });

DEMO

As OP has updated question. Use

 $('.inputs').keydown(function (e) {
     if (e.which === 13) {
         var index = $('.inputs').index(this) + 1;
         $('.inputs').eq(index).focus();
     }
 });

DEMO, As note I have used class="inputs"

score 0 · Answer 2 · answered Jan 20 '14 at 17:25

Maybe it didn't work, because you are not using any parameter for the find() method.

And try this simly:

$('#txt').keydown(function (e){
   if(e.keyCode == 13){
     $(this).next('.inputs').focus();
   }
});

Or this:

$('#txt').keydown(function (e){
   if(e.keyCode == 13){
     $(this).find('.inputs').focus();
   }
});

These would work!

score 0 · Answer 3 · edited Jan 20 '14 at 17:34

0

 $('.inputs').keydown(function (e){
   if(e.keyCode == 13){
     $(this).next('.inputs').focus();
 }
});

edited Jan 20 '14 at 17:34

Satpal

132,252
13
159
168

answered Jan 20 '14 at 17:25

Milind Anantwar

81,290
25
94
125

just to be clear `$(this).next('.inputs')` won't find the next input, it will fetch the next sibling element (whatever it is) and return it only if it has class `inputs` – David Fregoli Jan 20 '14 at 17:31

score 0 · Answer 4 · edited May 23 '17 at 10:30

0

It is:

if (event.which == 13) {
    event.preventDefault();
    var $this = $(event.target);
    var index = parseFloat($this.attr('data-index'));
    $('[data-index="' + (index + 1).toString() + '"]').focus();
}

http://jsfiddle.net/hxZSU/1/

Font:

focusing on next input (jquery)

edited May 23 '17 at 10:30

Community

1
1

answered Jan 20 '14 at 17:39

CesarMiguel

3,756
4
24
34

Kunchok Tashi · Answer 5 · 2020-05-07T08:00:06.917

This worked for me in angular, I have added jQuery as well. You get the idea. It is same for all javascript.

I have table with dynamic row. field-focus class with each td input.

<tr>
  <td>
<textarea name="labResultAlpha" cols="25" rows="1" class="field-focus" (keydown)="keyPressFunction($event)"></textarea>   
  </td>
</tr>

TypeScript/Javascript
METHOD 1

enterPressFunction(e) {
    const focus = $(document.activeElement); //get your active elememt ie select input
    let inputView;
    if (e.which === 13) {
      inputView = focus.closest('tbody').next().find(".field-focus"); // go to tbody and search for next class name .field-focus
    }
    inputView.show().focus(); //focus and show next input in table
  }

If this didt work try second one.
METHOD 2

keyPressFunction(e) {    
    const focus = $(document.activeElement); //get current element
    if (e.which === 13) { //if entered is clicked
      focus.closest('tr').next('tr').find('.field-focus').focus(); //get current row,go to next row of current row and find field-focus class, focus on input
    }

  }

Focus on next input field inside table with enter key press

5 Answers5

Linked