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);" >

possible duplicate of [Simulate JavaScript Key Events](http://stackoverflow.com/questions/596481/simulate-javascript-key-events) — Naftali, Sep 13 '12 at 13:17

Denys Séguret · Answer 1 · 2012-09-13T13:37:17.580

13

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.

edited Sep 13 '12 at 13:37

answered Sep 13 '12 at 13:16

Denys Séguret

372,613
87
782
758

@Neal +1 As many people I'm a little too used to Javascript with chocolate. nextSibling is a good choice if porting to vanilla js is necessary. – Denys Séguret Sep 13 '12 at 13:22
@Neal but you still want to filter on inputs, that can't be done with nextSibling, so you have to loop :( – Denys Séguret Sep 13 '12 at 13:26
So loop @dystroy! That is what `.next()` does anyway! [See the `.map` function](http://james.padolsey.com/jquery/#v=1.7.2&fn=jQuery.fn.next) – Naftali Sep 13 '12 at 13:33
I ported it in vanilla js. Just because we have to keep our mind able to do it. But that's more tedious, even if it could have been shorter. – Denys Séguret Sep 13 '12 at 13:36
@dystroy,how would u do with js – lakshmi kanth Sep 13 '12 at 13:38
@lakshmikanth Can you precise your question ? I think I've demonstrated what you asked for. – Denys Séguret Sep 13 '12 at 13:38

score 4 · Answer 2 · edited Sep 18 '12 at 11:56

4

This is my final working code:

$('input[type="text"],textarea').keydown( function(e) {
    var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;

    if(key == 40) {
        e.preventDefault();
        var inputs = $(this).parents('form').find(':input[type="text"]:enabled:visible:not("disabled"),textarea');

        inputs.eq( inputs.index(this)+ 1 ).focus();
        inputs.eq( inputs.index(this)+ 1 ).click();
    }
});

edited Sep 18 '12 at 11:56

Jake1164

12,291
6
47
64

answered Sep 18 '12 at 10:42

lakshmi kanth

207
1
2
6

I am just missing :not("readonly"). But with that it works as a charm, thank you man. – Novasol Apr 17 '15 at 15:22

score 0 · Answer 3 · answered Sep 13 '12 at 13:17

If I understand correctly, some fields are read-only, so the tab key still activates them, even though they are read-only, and this is annoying, as you have to press the tab key perhaps several times to get to the next editable field. If that is correct, then an alternate solution would be to use the tabindex attribute on your input fields, indexing each one so that the read-only and otherwise non-editable fields aren't selected. You can find more info on the tabindex attribute here.

@strout,i could disable tabindex for readonly feilds ,i need to implement tab key functionality on down arrow key..thanks — lakshmi kanth, Sep 13 '12 at 13:37

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

3 Answers3

Linked