Navigate inputs using the arrow keys
Question
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:
HTML
<div id="booking-docket" title="Booking Docket">
<h6>BOOKING DETAILS</h6>
<div id="booking-docket-wrapper">
<div class="booking-left left">
<div class="col-1 left">
<p class="p-lbl-txt left">PAYMENT:</p>
<select id="txt-payment" class="input-select move right" />
<option value="Cash">Cash</option>
<option value="Acc">Acc</option>
<option value="CC">CC</option>
<option value="PP">PP</option>
</select>
</div>
<div class="col-2 left">
<p class="p-lbl-txt left">ACCOUNT NO:</p>
<input type="text" id="txt-account" class="input-txt-sml move right" tabindex="3" />
</div>
<div class="clear"></div>
<div class="col-1 left">
<p class="p-lbl-txt left">PASSENGER:</p>
<input type="text" id="txt-passenger" class="input-txt-sml move right" tabindex="2" />
</div>
<div class="col-2 left">
<p class="p-lbl-txt left">ACC NAME:</p>
<input type="text" id="txt-account-name" class="input-txt-sml move right" tabindex="4" />
</div>
</div>
<div class="booking-right left">
<div class="col-1 left">
<p class="p-lbl-txt left">TELEPHONE:</p>
<input type="text" id="txt-telephone" class="input-txt-sml move right" tabindex="5" />
</div>
<div class="col-2 left">
<p class="p-lbl-txt left">DATE:</p>
<input type="text" id="txt-date" class="input-txt-sml move right" tabindex="7" />
</div>
<div class="col-1 left">
<p class="p-lbl-txt left">LEAD TIME:</p>
<input type="text" id="txt-lead" class="input-txt-sml move right" tabindex="6" />
</div>
<div class="col-2 left">
<p class="p-lbl-txt left">TIME:</p>
<input type="text" id="txt-min" class="input-txt-xxsml move right" tabindex="9" />
<input type="text" id="txt-hour" class="input-txt-xxsml move right" tabindex="8" />
</div>
</div>
<h6>JOURNEY DETAILS</h6>
<div class="booking-left left">
<div class="col-3 left">
<div title="Pickup">
<p class="p-lbl-txt left">PICKUP:</p>
<input type="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" />
<input type="text" id="txt-pickup-hn" class="input-txt-xsml move right" tabindex="10" />
<input type="hidden" id="txt-pickup-pc" class="hidden-post-code" />
<input type="hidden" id="txt-pickup-lat-long" class="hidden-lat-lng" />
<button id="cp-search-pick" class="hide" name="btn-row-wrapper" >Search</button>
<div class="div-result-info div-pagenation-style">
<label class="left">Showing results <span class="res-pgnum"></span> of <span class="res-ttlpgs"></span></label>
<span class="right"><a href="#" class="lbl-addr-pgup navicon" ><img src="images/nav-rght-sml.png" alt="nav-right" /></a></span>
<span class="right"><a href="#" class="lbl-addr-pgdn navicon" ><img src="images/nav-lft-sml.png" alt="nav-left" /></a></span>
</div>
</div>
</div>
<div class="col-3 left">
<div title="Dropoff">
<p class="p-lbl-txt left">DESTINATION:</p>
<input type="text" id="txt-destination" class="btn-row-wrapper addr-search-input validate-from-db input-txt-med address move right" tabindex="13" />
<input type="text" id="txt-destination-hn" class="input-txt-xsml move right" tabindex="12" />
<input type="hidden" id="txt-destination-pc" class="hidden-post-code" />
<input type="hidden" id="txt-destination-lat-long" class="hidden-lat-lng" />
<button id="cp-search-dest" class="hide" name="btn-row-wrapper" >Search</button>
<div class="div-result-info div-pagenation-style">
<label class="left">Showing results <span class="res-pgnum"></span> of <span class="res-ttlpgs"></span></label>
<span class="right"><a href="#" class="lbl-addr-pgup navicon" ><img src="images/nav-rght-sml.png" alt="nav-right" /></a></span>
<span class="right"><a href="#" class="lbl-addr-pgdn navicon" ><img src="images/nav-lft-sml.png" alt="nav-left" /></a></span>
</div>
</div>
</div>
</div>
<div class="booking-right left">
<div class="col-3 left">
<div title="Via">
<p class="p-lbl-txt left">VIA:</p>
<input type="text" id="txt-via" class="btn-row-wrapper addr-search-input validate-from-db input-txt-med address move right" tabindex="15" />
<input type="text" id="txt-via-hn" class="input-txt-xsml move right" tabindex="14" />
<input type="hidden" id="txt-via-pc" class="hidden-post-code" />
<input type="hidden" id="txt-via-lat-long" class="hidden-lat-lng" />
<button class="hide" name="btn-row-wrapper" >Search</button>
<div class="div-result-info div-pagenation-style">
<label class="left">Showing results <span class="res-pgnum"></span> of <span class="res-ttlpgs"></span></label>
<span class="right"><a href="#" class="lbl-addr-pgup navicon" ><img src="images/nav-rght-sml.png" alt="nav-right" /></a></span>
<span class="right"><a href="#" class="lbl-addr-pgdn navicon" ><img src="images/nav-lft-sml.png" alt="nav-left" /></a></span>
</div>
</div>
</div>
<div class="col-1 left">
<p class="p-lbl-txt left">TARIFF:</p>
<input type="text" id="txt-tariff" class="input-txt-sml move right" tabindex="16" />
</div>
<div class="col-2 left">
<p class="p-lbl-txt left">EMAIL:</p>
<!-- TEMP REMOVED <img id="img-email" class="left" src="images/email.png" title="Email PDF Job Receipt" />-->
<input type="text" id="txt-email" class="input-txt-sml move right" tabindex="17" />
</div>
</div>
<h6>GENERAL DETAILS</h6>
<div class="booking-left left">
<div class="col-1 left">
<p class="p-lbl-txt left">DRV FARE:</p>
<input type="text" id="txt-drv-fare" class="input-txt-sml move right" tabindex="18" />
</div>
<div class="col-2 left">
<p class="p-lbl-txt left">CAR TYPE:</p>
<select id="txt-cartype" class="input-select move right" tabindex="20" >
<option value="Car">Car</option>
<option value="Est">Est</option>
<option value="Bus">Bus</option>
<option value="8B">8B</option>
</select>
</div>
<div class="col-1 left">
<p class="p-lbl-txt left">CLIENT FARE:</p>
<input type="text" id="txt-client-fare" class="input-txt-sml move right" tabindex="19" />
</div>
<div class="col-2 left">
<p class="p-lbl-txt left">FLIGHT NO:</p>
<input type="text" id="txt-flight-no" class="input-txt-sml move right" tabindex="21" />
</div>
</div>
<div class="booking-right left">
<div class="col-1 left">
<p class="p-lbl-txt left">MILES:</p>
<input type="text" id="txt-miles" class="input-txt-sml move right" tabindex="22" />
</div>
<div class="col-2 left">
<p class="p-lbl-txt left">CAR:</p>
<input type="text" id="txt-car" class="input-txt-sml move right" tabindex="24" />
</div>
<div class="col-1 left">
<p class="p-lbl-txt left">WAITING:</p>
<input type="text" id="txt-waiting" class="input-txt-sml move right" tabindex="23" />
</div>
<div class="col-2 left">
<p class="p-lbl-txt left">DRIVER:</p>
<input type="text" id="txt-driver" class="input-txt-sml move right" tabindex="25" />
</div>
</div>
<h6>NOTES</h6>
<div class="booking-full left">
<div class="col-3 left">
<p class="p-lbl-txt left">GENERAL NOTES:</p>
<input type="text" id="txt-general" class="input-txt-lrg move right" tabindex="26" />
</div>
<div class="col-3 left">
<p class="p-lbl-txt left">OFFICE NOTES:</p>
<input type="text" id="txt-office" class="input-txt-lrg move right" tabindex="27" />
</div>
</div>
<h6>MISC</h6>
<div class="booking-left-s left">
<div class="col-1 left">
<p class="p-lbl-txt left">RETURN:</p>
<div class="check"><input type="checkbox" id="chk-return" class="test move left" name="chk-return" value="return" tabindex="28"></div>
</div>
<div class="col-2 left">
<p class="p-lbl-txt left">PRE BOOKING:</p>
<input type="text" id="txt-prebook" class="input-txt-sml move right" tabindex="29" />
</div>
</div>
<div class="booking-right-s left">
<div class="col-1 left">
<p class="p-lbl-txt left">NO. OF JOBS:</p>
<input type="text" id="txt-nojobs" class="input-txt-sml move right" tabindex="30" />
</div>
<div class="col-2 left">
<p class="p-lbl-txt left">BOOKED BY:</p>
<input type="text" id="txt-bookedby" class="input-txt-sml right" tabindex="31" value="<?php echo UserAccount::get_username(); ?>" disabled />
</div>
</div>
<p id="p-reference-no" class="text-align-center"></p>
</div>
</div>
<!-- End of Booking Docket -->
jQuery
// Navigate Docket using Keys
var keyUp = 38;
var keyDown = 40;
$(document).keydown(
function(e)
{
// Key up function
if (e.keyCode == keyUp) {
$(".move:focus").next().focus();
}
if (e.keyCode == keyDown) {
$(".move:focus").prev().focus();
}
}
);
I've basically added a class called 'move' to all the input values, but for some reason this is not working for me at all. Any help would be much appreciated!
It appears to work two of the boxes, ie pickup house no to pickup address, but not for any of the other text boxes.
Here is the jsfiddle link; http://jsfiddle.net/kwx6u8w4/
1 answers
solution1
1 ACCPTED 2014-11-13 16:19:38
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 function if (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; } } } } ); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div id="booking-docket" title="Booking Docket"> <h6>BOOKING DETAILS</h6> <div id="booking-docket-wrapper"> <div class="booking-left left"> <div class="col-1 left"> <p class="p-lbl-txt left">PAYMENT:</p> <select id="txt-payment" class="input-select move right" /> <option value="Cash">Cash</option> <option value="Acc">Acc</option> <option value="CC">CC</option> <option value="PP">PP</option> </select> </div> <div class="col-2 left"> <p class="p-lbl-txt left">ACCOUNT NO:</p> <input type="text" id="txt-account" class="input-txt-sml move right" tabindex="3" /> </div> <div class="clear"></div> <div class="col-1 left"> <p class="p-lbl-txt left">PASSENGER:</p> <input type="text" id="txt-passenger" class="input-txt-sml move right" tabindex="2" /> </div> <div class="col-2 left"> <p class="p-lbl-txt left">ACC NAME:</p> <input type="text" id="txt-account-name" class="input-txt-sml move right" tabindex="4" /> </div> </div> <div class="booking-right left"> <div class="col-1 left"> <p class="p-lbl-txt left">TELEPHONE:</p> <input type="text" id="txt-telephone" class="input-txt-sml move right" tabindex="5" /> </div> <div class="col-2 left"> <p class="p-lbl-txt left">DATE:</p> <input type="text" id="txt-date" class="input-txt-sml move right" tabindex="7" /> </div> <div class="col-1 left"> <p class="p-lbl-txt left">LEAD TIME:</p> <input type="text" id="txt-lead" class="input-txt-sml move right" tabindex="6" /> </div> <div class="col-2 left"> <p class="p-lbl-txt left">TIME:</p> <input type="text" id="txt-min" class="input-txt-xxsml move right" tabindex="9" /> <input type="text" id="txt-hour" class="input-txt-xxsml move right" tabindex="8" /> </div> </div> <h6>JOURNEY DETAILS</h6> <div class="booking-left left"> <div class="col-3 left"> <div title="Pickup"> <p class="p-lbl-txt left">PICKUP:</p> <input type="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" /> <input type="text" id="txt-pickup-hn" class="input-txt-xsml move right" tabindex="10" /> <input type="hidden" id="txt-pickup-pc" class="hidden-post-code" /> <input type="hidden" id="txt-pickup-lat-long" class="hidden-lat-lng" /> <button id="cp-search-pick" class="hide" name="btn-row-wrapper" >Search</button> <div class="div-result-info div-pagenation-style"> <label class="left">Showing results <span class="res-pgnum"></span> of <span class="res-ttlpgs"></span></label> <span class="right"><a href="#" class="lbl-addr-pgup navicon" ><img src="images/nav-rght-sml.png" alt="nav-right" /></a></span> <span class="right"><a href="#" class="lbl-addr-pgdn navicon" ><img src="images/nav-lft-sml.png" alt="nav-left" /></a></span> </div> </div> </div> <div class="col-3 left"> <div title="Dropoff"> <p class="p-lbl-txt left">DESTINATION:</p> <input type="text" id="txt-destination" class="btn-row-wrapper addr-search-input validate-from-db input-txt-med address move right" tabindex="13" /> <input type="text" id="txt-destination-hn" class="input-txt-xsml move right" tabindex="12" /> <input type="hidden" id="txt-destination-pc" class="hidden-post-code" /> <input type="hidden" id="txt-destination-lat-long" class="hidden-lat-lng" /> <button id="cp-search-dest" class="hide" name="btn-row-wrapper" >Search</button> <div class="div-result-info div-pagenation-style"> <label class="left">Showing results <span class="res-pgnum"></span> of <span class="res-ttlpgs"></span></label> <span class="right"><a href="#" class="lbl-addr-pgup navicon" ><img src="images/nav-rght-sml.png" alt="nav-right" /></a></span> <span class="right"><a href="#" class="lbl-addr-pgdn navicon" ><img src="images/nav-lft-sml.png" alt="nav-left" /></a></span> </div> </div> </div> </div> <div class="booking-right left"> <div class="col-3 left"> <div title="Via"> <p class="p-lbl-txt left">VIA:</p> <input type="text" id="txt-via" class="btn-row-wrapper addr-search-input validate-from-db input-txt-med address move right" tabindex="15" /> <input type="text" id="txt-via-hn" class="input-txt-xsml move right" tabindex="14" /> <input type="hidden" id="txt-via-pc" class="hidden-post-code" /> <input type="hidden" id="txt-via-lat-long" class="hidden-lat-lng" /> <button class="hide" name="btn-row-wrapper" >Search</button> <div class="div-result-info div-pagenation-style"> <label class="left">Showing results <span class="res-pgnum"></span> of <span class="res-ttlpgs"></span></label> <span class="right"><a href="#" class="lbl-addr-pgup navicon" ><img src="images/nav-rght-sml.png" alt="nav-right" /></a></span> <span class="right"><a href="#" class="lbl-addr-pgdn navicon" ><img src="images/nav-lft-sml.png" alt="nav-left" /></a></span> </div> </div> </div> <div class="col-1 left"> <p class="p-lbl-txt left">TARIFF:</p> <input type="text" id="txt-tariff" class="input-txt-sml move right" tabindex="16" /> </div> <div class="col-2 left"> <p class="p-lbl-txt left">EMAIL:</p> <!-- TEMP REMOVED <img id="img-email" class="left" src="images/email.png" title="Email PDF Job Receipt" />--> <input type="text" id="txt-email" class="input-txt-sml move right" tabindex="17" /> </div> </div> <h6>GENERAL DETAILS</h6> <div class="booking-left left"> <div class="col-1 left"> <p class="p-lbl-txt left">DRV FARE:</p> <input type="text" id="txt-drv-fare" class="input-txt-sml move right" tabindex="18" /> </div> <div class="col-2 left"> <p class="p-lbl-txt left">CAR TYPE:</p> <select id="txt-cartype" class="input-select move right" tabindex="20" > <option value="Car">Car</option> <option value="Est">Est</option> <option value="Bus">Bus</option> <option value="8B">8B</option> </select> </div> <div class="col-1 left"> <p class="p-lbl-txt left">CLIENT FARE:</p> <input type="text" id="txt-client-fare" class="input-txt-sml move right" tabindex="19" /> </div> <div class="col-2 left"> <p class="p-lbl-txt left">FLIGHT NO:</p> <input type="text" id="txt-flight-no" class="input-txt-sml move right" tabindex="21" /> </div> </div> <div class="booking-right left"> <div class="col-1 left"> <p class="p-lbl-txt left">MILES:</p> <input type="text" id="txt-miles" class="input-txt-sml move right" tabindex="22" /> </div> <div class="col-2 left"> <p class="p-lbl-txt left">CAR:</p> <input type="text" id="txt-car" class="input-txt-sml move right" tabindex="24" /> </div> <div class="col-1 left"> <p class="p-lbl-txt left">WAITING:</p> <input type="text" id="txt-waiting" class="input-txt-sml move right" tabindex="23" /> </div> <div class="col-2 left"> <p class="p-lbl-txt left">DRIVER:</p> <input type="text" id="txt-driver" class="input-txt-sml move right" tabindex="25" /> </div> </div> <h6>NOTES</h6> <div class="booking-full left"> <div class="col-3 left"> <p class="p-lbl-txt left">GENERAL NOTES:</p> <input type="text" id="txt-general" class="input-txt-lrg move right" tabindex="26" /> </div> <div class="col-3 left"> <p class="p-lbl-txt left">OFFICE NOTES:</p> <input type="text" id="txt-office" class="input-txt-lrg move right" tabindex="27" /> </div> </div> <h6>MISC</h6> <div class="booking-left-s left"> <div class="col-1 left"> <p class="p-lbl-txt left">RETURN:</p> <div class="check"><input type="checkbox" id="chk-return" class="test move left" name="chk-return" value="return" tabindex="28"></div> </div> <div class="col-2 left"> <p class="p-lbl-txt left">PRE BOOKING:</p> <input type="text" id="txt-prebook" class="input-txt-sml move right" tabindex="29" /> </div> </div> <div class="booking-right-s left"> <div class="col-1 left"> <p class="p-lbl-txt left">NO. OF JOBS:</p> <input type="text" id="txt-nojobs" class="input-txt-sml move right" tabindex="30" /> </div> <div class="col-2 left"> <p class="p-lbl-txt left">BOOKED BY:</p> <input type="text" id="txt-bookedby" class="input-txt-sml right" tabindex="31" value="<?php echo UserAccount::get_username(); ?>" disabled /> </div> </div> <p id="p-reference-no" class="text-align-center"></p> </div> </div> <!-- End of Booking Docket -->
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Javascript: navigate table inputs with arrow keys
How to navigate through inputs that are in a table with arrow keys?
Using arrow keys to navigate in a table
MUIdatatables how to navigate using arrow/tab keys?
Focusing on inputs in divs, using arrow keys (no jQuery)
How to navigate textboxes in between different tables using arrow keys?
How to navigate from one textbox to another textbox using arrow keys
Navigate through multiple lists using arrow keys/jQuery?
Ext js6.2, Navigate Textfields using Arrow keys
Navigate ng-grid rows using arrow keys
Related Tags