CODEWITHSUNDEEP
jquery
geomo
geomo

Reputation: 141

Focus on next input field inside table with enter key press

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 ?

Upvotes: 4

Views: 41578

Answers (5)

Kunchok Tashi
Kunchok Tashi

Reputation: 2964

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
    }

  }

Upvotes: 0

Satpal
Satpal

Reputation: 133403

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"

Upvotes: 16

CesarMiguel
CesarMiguel

Reputation: 3830

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)

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

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

Upvotes: 0

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

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!

Upvotes: 0

Related Questions