使用箭頭鍵瀏覽輸入
[英]Navigate inputs using the arrow keys
問題描述
我有以下代碼，由於某種原因，我無法使用箭頭鍵進行工作（向上轉到上一個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/
1 個解決方案
解決方案1
1 已采納 2014-11-13 16:19:38
這是一個示例，它可以完成您要嘗試執行的操作。 $（“。move：focus”）。next（）。focus（）;的問題 是.move元素必須是同胞。
$(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 -->
Javascript：使用箭頭鍵導航表格輸入
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.