Focus the next input with down arrow key (as with the tab key)

Question

I have a huge entry form and fields for the users to input.

In the form user use tab key to move to next feild,there are some hidden fields and readonly textboxes in between on which tab key is disabled using javascript.

Now users finds difficult to use tab key and wants same functionality on down arrow key of the keyboard.

I was using the below code to invoke the tab key code on js but not working,please some body help me on this.

function handleKeyDownEvent(eventRef)
{ 
 var charCode = (window.event) ? eventRef.keyCode : eventRef.which;

 //alert(charCode);

 // Arrow keys (37:left, 38:up, 39:right, 40:down)...
 if (  (charCode == 40) )
 {

  if ( window.event )
   window.event.keyCode = 9;
  else
   event.which = 9;

  return false;
 }

 return true;
}

<input type="text"   onkeydown=" return  handleKeyDownEvent(event);" >

Answer 1

Using jQuery, you can do this :

$('input, select').keydown(function(e) {
    if (e.keyCode==40) {
        $(this).next('input, select').focus();
    }
});

When you press the down arrow key (keyCode 40), the next input receives the focus.

DEMO​

EDIT :

In Vanilla JS, this could be done like this :

function doThing(inputs) {    
    for (var i=0; i<inputs.length; i++) {
        inputs[i].onkeydown = function(e) {
            if (e.keyCode==40) {
                var node = this.nextSibling;
                while (node) {
                    console.log(node.tagName);
                    if (node.tagName=='INPUT' || node.tagName=='SELECT') {
                        node.focus();
                        break;
                    }
                    node = node.nextSibling;                
                }
            }
        };
    };
}
doThing(document.getElementsByTagName('input'));
doThing(document.getElementsByTagName('select'));

Note that you'd probably want to map the up key too, and go to first input at last one, etc. I let you handle the details depending on your exact requirements.