使用箭头键浏览输入
[英]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). 
我有以下代码，由于某种原因，我无法使用箭头键进行工作（向上转到上一个tabindex，向下转到下一个tabindex）。
Here is the code: 这是代码：
HTML 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 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. 我基本上已经为所有输入值添加了一个名为“ move”的类，但是由于某种原因，这根本不适合我。 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; 这是jsfiddle链接； http://jsfiddle.net/kwx6u8w4/ http://jsfiddle.net/kwx6u8w4/
1 个解决方案
解决方案1
1 已采纳 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(); $（“。move：focus”）。next（）。focus（）;的问题 is that the .move elements has to be sibblings. 是.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 -->
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Javascript：使用箭头键导航表格输入 - 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 如何使用箭头/tab 键导航？ - MUIdatatables how to navigate using arrow/tab keys?
专注于 div 中的输入，使用箭头键（无 jQuery） - 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
使用箭头键/ jQuery导航多个列表？ - Navigate through multiple lists using arrow keys/jQuery?
Ext js6.2，使用箭头键浏览文本字段 - Ext js6.2, Navigate Textfields using Arrow keys
使用箭头键浏览ng-grid行 - Navigate ng-grid rows using arrow keys
相关标签