Перемещение входов с помощью клавиш со стрелками

У меня есть следующий код, который по какой-то причине я не могу работать с помощью клавиш со стрелками (до перехода к предыдущему 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(); 

     } 
    } 
);

Я в основном добавил класс под названием 'шаг' для всех входных значений, но для почему-то это не работает для меня вообще. Любая помощь приветствуется!

Кажется, что работают два из ящиков, то есть пикап, нет адреса для приема, но не для каких-либо других текстовых полей.

Вот ссылка jsfiddle; http://jsfiddle.net/kwx6u8w4/

источник

2014-11-13 nsilva

Вот пример, который должен делать то, что вы пытаетесь сделать. Проблема с $ (". Move: focus"). Next(). Focus(); заключается в том, что элементы .move должны быть 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 -->

источник

2014-11-13 16:19:38 ZarX

Это отлично, спасибо! Есть ли способ отключить его, изменяя параметр выбора, когда вы нажимаете клавишу от него – nsilva

Перемещение входов с помощью клавиш со стрелками

ответ

Смежные вопросы