Navigate Inputs Using The Arrow Keys

I have the following code which for some reason I can't get to work using the arrow keys (up to go to the previous tabindex, and down to go to the next tabindex). Here is the code:

Solution 1:

Here's an example that should do what you're trying to do. The problem with the $(".move:focus").next().focus(); is that the .move elements has to be sibblings.

$(function  (){
    var keyUp = 38;
    var keyDown = 40;
    
    $(document).keydown(
        function(e)
        {
            var moves = $(".move");
            // Key up functionif (e.keyCode == keyDown) {
                for(i = 0; i <= moves.length; i++) {
                    if (moves[i] == $(".move:focus").get(0)) {
                       $(moves[i + 1]).focus();
                        break;
                    }
                }
            }
            if (e.keyCode == keyUp) {
                for(i = 0; i <= moves.length; i++) {
                    if (moves[i] == $(".move:focus").get(0)) {
                       $(moves[i - 1]).focus();
                        break;
                    }
                }
            }
        }
    );
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><divid="booking-docket"title="Booking Docket"><h6>BOOKING DETAILS</h6><divid="booking-docket-wrapper"><divclass="booking-left left"><divclass="col-1 left"><pclass="p-lbl-txt left">PAYMENT:</p><selectid="txt-payment"class="input-select move right" /><optionvalue="Cash">Cash</option><optionvalue="Acc">Acc</option><optionvalue="CC">CC</option><optionvalue="PP">PP</option></select></div><divclass="col-2 left"><pclass="p-lbl-txt left">ACCOUNT NO:</p><inputtype="text"id="txt-account"class="input-txt-sml move right"tabindex="3"  /></div><divclass="clear"></div><divclass="col-1 left"><pclass="p-lbl-txt left">PASSENGER:</p><inputtype="text"id="txt-passenger"class="input-txt-sml move right"tabindex="2" /></div><divclass="col-2 left"><pclass="p-lbl-txt left">ACC NAME:</p><inputtype="text"id="txt-account-name"class="input-txt-sml move right"tabindex="4"  /></div></div><divclass="booking-right left"><divclass="col-1 left"><pclass="p-lbl-txt left">TELEPHONE:</p><inputtype="text"id="txt-telephone"class="input-txt-sml move right"tabindex="5"  /></div><divclass="col-2 left"><pclass="p-lbl-txt left">DATE:</p><inputtype="text"id="txt-date"class="input-txt-sml move right"tabindex="7"  /></div><divclass="col-1 left"><pclass="p-lbl-txt left">LEAD TIME:</p><inputtype="text"id="txt-lead"class="input-txt-sml move right"tabindex="6"  /></div><divclass="col-2 left"><pclass="p-lbl-txt left">TIME:</p><inputtype="text"id="txt-min"class="input-txt-xxsml move right"tabindex="9"  /><inputtype="text"id="txt-hour"class="input-txt-xxsml move right"tabindex="8"  /></div></div><h6>JOURNEY DETAILS</h6><divclass="booking-left left"><divclass="col-3 left"><divtitle="Pickup"><pclass="p-lbl-txt left">PICKUP:</p><inputtype="text"id="txt-pickup"name="txt-pickup"class="btn-row-wrapper btn-row-wrapper addr-search-input validate-from-db input-txt-med address move right"tabindex="11"  /><inputtype="text"id="txt-pickup-hn"class="input-txt-xsml move right"tabindex="10"  /><inputtype="hidden"id="txt-pickup-pc"class="hidden-post-code" /><inputtype="hidden"id="txt-pickup-lat-long"class="hidden-lat-lng" /><buttonid="cp-search-pick"class="hide"name="btn-row-wrapper" >Search</button><divclass="div-result-info div-pagenation-style"><labelclass="left">Showing results <spanclass="res-pgnum"></span> of <spanclass="res-ttlpgs"></span></label><spanclass="right"><ahref="#"class="lbl-addr-pgup navicon" ><imgsrc="images/nav-rght-sml.png"alt="nav-right" /></a></span><spanclass="right"><ahref="#"class="lbl-addr-pgdn navicon" ><imgsrc="images/nav-lft-sml.png"alt="nav-left" /></a></span></div></div></div><divclass="col-3 left"><divtitle="Dropoff"><pclass="p-lbl-txt left">DESTINATION:</p><inputtype="text"id="txt-destination"class="btn-row-wrapper addr-search-input validate-from-db input-txt-med address move right"tabindex="13"  /><inputtype="text"id="txt-destination-hn"class="input-txt-xsml move right"tabindex="12"  /><inputtype="hidden"id="txt-destination-pc"class="hidden-post-code" /><inputtype="hidden"id="txt-destination-lat-long"class="hidden-lat-lng" /><buttonid="cp-search-dest"class="hide"name="btn-row-wrapper" >Search</button><divclass="div-result-info div-pagenation-style"><labelclass="left">Showing results <spanclass="res-pgnum"></span> of <spanclass="res-ttlpgs"></span></label><spanclass="right"><ahref="#"class="lbl-addr-pgup navicon" ><imgsrc="images/nav-rght-sml.png"alt="nav-right" /></a></span><spanclass="right"><ahref="#"class="lbl-addr-pgdn navicon" ><imgsrc="images/nav-lft-sml.png"alt="nav-left" /></a></span></div></div></div></div><divclass="booking-right left"><divclass="col-3 left"><divtitle="Via"><pclass="p-lbl-txt left">VIA:</p><inputtype="text"id="txt-via"class="btn-row-wrapper addr-search-input validate-from-db input-txt-med address move right"tabindex="15"  /><inputtype="text"id="txt-via-hn"class="input-txt-xsml move right"tabindex="14"  /><inputtype="hidden"id="txt-via-pc"class="hidden-post-code" /><inputtype="hidden"id="txt-via-lat-long"class="hidden-lat-lng" /><buttonclass="hide"name="btn-row-wrapper" >Search</button><divclass="div-result-info div-pagenation-style"><labelclass="left">Showing results <spanclass="res-pgnum"></span> of <spanclass="res-ttlpgs"></span></label><spanclass="right"><ahref="#"class="lbl-addr-pgup navicon" ><imgsrc="images/nav-rght-sml.png"alt="nav-right" /></a></span><spanclass="right"><ahref="#"class="lbl-addr-pgdn navicon" ><imgsrc="images/nav-lft-sml.png"alt="nav-left" /></a></span></div></div></div><divclass="col-1 left"><pclass="p-lbl-txt left">TARIFF:</p><inputtype="text"id="txt-tariff"class="input-txt-sml move right"tabindex="16"  /></div><divclass="col-2 left"><pclass="p-lbl-txt left">EMAIL:</p><!-- TEMP REMOVED <img id="img-email" class="left" src="images/email.png" title="Email PDF Job Receipt" />--><inputtype="text"id="txt-email"class="input-txt-sml move right"tabindex="17"  /></div></div><h6>GENERAL DETAILS</h6><divclass="booking-left left"><divclass="col-1 left"><pclass="p-lbl-txt left">DRV FARE:</p><inputtype="text"id="txt-drv-fare"class="input-txt-sml move right"tabindex="18"  /></div><divclass="col-2 left"><pclass="p-lbl-txt left">CAR TYPE:</p><selectid="txt-cartype"class="input-select move right"tabindex="20" ><optionvalue="Car">Car</option><optionvalue="Est">Est</option><optionvalue="Bus">Bus</option><optionvalue="8B">8B</option></select></div><divclass="col-1 left"><pclass="p-lbl-txt left">CLIENT FARE:</p><inputtype="text"id="txt-client-fare"class="input-txt-sml move right"tabindex="19"  /></div><divclass="col-2 left"><pclass="p-lbl-txt left">FLIGHT NO:</p><inputtype="text"id="txt-flight-no"class="input-txt-sml move right"tabindex="21"  /></div></div><divclass="booking-right left"><divclass="col-1 left"><pclass="p-lbl-txt left">MILES:</p><inputtype="text"id="txt-miles"class="input-txt-sml move right"tabindex="22"  /></div><divclass="col-2 left"><pclass="p-lbl-txt left">CAR:</p><inputtype="text"id="txt-car"class="input-txt-sml move right"tabindex="24"  /></div><divclass="col-1 left"><pclass="p-lbl-txt left">WAITING:</p><inputtype="text"id="txt-waiting"class="input-txt-sml move right"tabindex="23"  /></div><divclass="col-2 left"><pclass="p-lbl-txt left">DRIVER:</p><inputtype="text"id="txt-driver"class="input-txt-sml move right"tabindex="25"  /></div></div><h6>NOTES</h6><divclass="booking-full left"><divclass="col-3 left"><pclass="p-lbl-txt left">GENERAL NOTES:</p><inputtype="text"id="txt-general"class="input-txt-lrg move right"tabindex="26"  /></div><divclass="col-3 left"><pclass="p-lbl-txt left">OFFICE NOTES:</p><inputtype="text"id="txt-office"class="input-txt-lrg move right"tabindex="27"  /></div></div><h6>MISC</h6><divclass="booking-left-s left"><divclass="col-1 left"><pclass="p-lbl-txt left">RETURN:</p><divclass="check"><inputtype="checkbox"id="chk-return"class="test move left"name="chk-return"value="return"tabindex="28"></div></div><divclass="col-2 left"><pclass="p-lbl-txt left">PRE BOOKING:</p><inputtype="text"id="txt-prebook"class="input-txt-sml move right"tabindex="29"  /></div></div><divclass="booking-right-s left"><divclass="col-1 left"><pclass="p-lbl-txt left">NO. OF JOBS:</p><inputtype="text"id="txt-nojobs"class="input-txt-sml move right"tabindex="30"  /></div><divclass="col-2 left"><pclass="p-lbl-txt left">BOOKED BY:</p><inputtype="text"id="txt-bookedby"class="input-txt-sml right"tabindex="31"value="<?php echo UserAccount::get_username(); ?>"disabled /></div></div><pid="p-reference-no"class="text-align-center"></p></div></div><!-- End of Booking Docket -->