我有以下代码，由于某些原因我无法使用箭头键（最多转到上一个tabindex，然后转到下一个tabindex）。
以下是代码：
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();
}
}
);
我基本上为所有输入值添加了一个名为'move'的类，但由于某种原因，这对我来说根本不起作用。任何帮助将不胜感激！
它似乎工作了两个方框，即拾取房子没有取件地址，但不适用于任何其他文本框。
这是jsfiddle链接; http://jsfiddle.net/kwx6u8w4/
答案 0 :(得分：1)
这是一个应该做你想做的事情的例子。 $（“。move：focus”）。next（）。focus（）;是.move元素必须是sibbling。
$(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 -->