使用箭头键浏览输入 [英] Navigate inputs using the arrow keys
本文介绍了使用箭头键浏览输入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下代码，由于某些原因，我无法使用箭头键来工作(向上转到上一个tabindex，向下转到下一个tabindex).
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).
这是代码:
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"的类，但是由于某种原因，这根本对我不起作用.任何帮助将不胜感激！
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, i.e. pickup house no to pickup address, but not for any of the other text boxes.
这是jsfiddle链接； http://jsfiddle.net/kwx6u8w4/
Here is the jsfiddle link; http://jsfiddle.net/kwx6u8w4/
推荐答案
下面是一个示例，该示例应执行您要尝试执行的操作. $(.move:focus").next().focus();的问题是.move元素必须是同位元素.
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 -->
这篇关于使用箭头键浏览输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
