Set focus to the next input element

Question

I have a bootstrap form where I want to set the focus to the next 'enabled' input element upon pressing enter key. When I press enter in Barcode input element, I want to set the focus to the Quantity input element since it is the next enabled input element.



    
     
      
       Barcode
       
      
     
     
      
       Description
       
      
     
     
      
       UoM
       
      
     
    
    
     
      
       Quantity

What I have tried so far is:

$(":input").keydown(function(event){
    if (event.keyCode === 13) {
        $(this).nextAll(':input:enabled').first().focus();
    }
});

But this doesn't work as I expect.

user_560593 · Answer

next(), nextAll(), and the other similar methods are for finding siblings. Since none of your inputs are actual siblings this will not work.

What you can do however is:

Get a jQuery object of all the enabled inputs
```
var enabledInputs = $("input:enabled");
```
Get the index of the current input in that jQuery object using index()
```
var idx = enabledInputs.index(this);
```
Then using that index get the element at index+1 using eq()
```
enabledInputs.eq(idx+1).focus();
```

Demo

$(":input").keydown(function(event){
    if (event.keyCode === 13) {
      var enabledInputs = $("input:enabled");
      var idx = enabledInputs.index(this);
      enabledInputs.eq(idx+1).focus()
    }
});




    
     
      
       Barcode
       
      
     
     
      
       Description
       
      
     
     
      
       UoM
       
      
     
    
    
     
      
       Quantity

user_9515207 · Answer

The next input is not a sibling of the #barcode input, so nextAll won't work at that point. Try navigating to the parent's parent, the div class="col-, and then use nextAll to recursively search through that parent's siblings until a matching element is found:

$(":input").keydown(function(event) {
  if (event.keyCode !== 13) return;
  $(this)
    .parent()
    .parent() // get to the `class=col-#` element
    .nextAll(':input:enabled')
    .first()
    .focus();
});





  
    
      Barcode
      
    
  
  
    
      Description
      
    
  
  
    
      UoM
      
    
  


  
    
      Quantity

user_8526705 · Answer

If I understand your question correctly then one solution to this problem is to update your keydown() handler like so:

  if (event.keyCode === 13) {

      // Get all enabled inputs in the document
      var inputs = $('input:enabled');

      // Iterate all inputs, searching for the index of the "next" input to "this"
      for(var i = 0; i < inputs.length; i++) {

        // If the "global" index of "this" input is found
        if( $(inputs).eq(i).is( $(this) ) ) {

          // Then select the "next" input by incrementing the index, and call
          // focus on that input if it exists
          inputs.eq(i + 1)
          .css({ border : '1px solid red' }) // Added to help visualise focus, remove this line 
          .focus();

          // Exit the loop now that focus has been called on "next" input
          break
        }
      } 
    }

The idea here is to select the next input element based on the order that they occur in the DOM, rather than to select the next input element based on adjacent siblings to the input that "enter" is pressed. This solution also corrects a few minor errors in your code's selector syntax. Here's a working demo:

$("input").keydown(function(event){
 
    if (event.keyCode === 13) {
     
      var inputs = $('input:enabled');
      
      for(var i = 0; i < inputs.length; i++) {
        if( $(inputs).eq(i).is( $(this) ) ) {
          inputs.eq(i + 1)
          .css({ border : '1px solid red' }) // Added to help visualise focus, remove this line 
          .focus()
          break
        }
      } 
    }
});




    
     
      
       Barcode
       
      
     
     
      
       Description
       
      
     
     
      
       UoM
       
      
     
    
    
     
      
       Quantity

Set focus to the next input element

3 Answers