javascript - 使用箭头键导航输入

标签 javascript jquery

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

这是代码:

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/

上一篇：javascript - 为 colModel edittype 扩展 jqgrid

下一篇：javascript - 将自定义标题和消息添加到 Facebook 对话框共享

相关文章：

javascript - 将结束 </a> 标记移动到包含元素的末尾

javascript - 使用 angularjs 指令时 Fine Uploader 出现错误

javascript - 如何动态翻译 JavaScript 字符串？

javascript - 剑道网格 : Drag and Drop Cell Data From One Grid Into another

javascript - $http.get 调用中包含什么 URL？

将类添加到 (li) Parent 的 JavaScript

jquery - Chrome 错误还是 jQuery 错误？

javascript - 当在 angular 1.4.0-rc2 中与 ng-animate 一起使用时，ng-repeat 仍然显示已删除的项目

javascript - 使用 Vue 同步 Dygraph

javascript - 在jquery中获取多个延迟对象的响应

©2024 IT工具网  联系我们