gpt4 book ai didi

javascript - 使用箭头键导航输入

转载 作者:行者123 更新时间:2023-11-28 00:49:51 24 4
gpt4 key购买 nike

我有以下代码,由于某种原因,我无法使用箭头键进行工作(向上转到上一个选项卡索引,向下转到下一个选项卡索引)。

这是代码:

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/

最佳答案

这是一个应该可以完成您想要做的事情的示例。$(".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 - 使用箭头键导航输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26913084/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com