Question

Is it possible to use the enter key to move to the next input field in a form? I also want to use the tab, but the enter key would be nice too.

FYI – I do have several textareas and I need to use the enter key for returns when they type. Will this be a conflict?

Thank you.
Erik

Answer 1

If you were to add a class called ‘TabOnEnter’ to the fields where you want to cycle on enter.

$(document).on("keypress", ".TabOnEnter" , function(e)
  {
    //Only do something when the user presses enter
    if( e.keyCode ==  13 )
    {
       var nextElement = $('[tabindex="' + (this.tabIndex+1)  + '"]');
       console.log( this , nextElement ); 
       if(nextElement.length )
         nextElement.focus()
       else
         $('[tabindex="1"]').focus();  
    }   
  });

//Hidden inputs should get their tabindex fixed, not in scope ;)
//$(function(){ $('input[tabindex="4"]').fadeOut();  })

Not as cute as the previous answer, but it works now :

http://jsfiddle.net/konijn_gmail_com/WvHKA/

This way you use a standard HTML feature ( tabindex ) to determine the cycling order. Hidden elements should have their tabindex removed.