skupić się na następnym TabIndex elementu HTML onEnter naciśnięciu przez JQuery

Question

Hi friends, pracuję nad małym zadaniem jest umożliwienie użytkownikowi tabindex elementu HTML momencie wejść naciśnięcie klawisza.

Jako nowy w jquery napisałem kod, który wydaje mi się, że będzie działał, ale są w nim pewne problemy.

Ustalenia wstępne
Kod winowajca, nie robi praca, jako ouput w lablel MSG "Undefined"

$('*').attr('tabindex').id 

Kod jest podany poniżej i mam nawet utworzono JSFiddle.

JQuery

$(document).ready(function (eOuter) { 
    $('input').bind('keypress', function (eInner) { 
     if (eInner.keyCode == 13) //if its a enter key 
     { 
      var tabindex = $(this).attr('tabindex'); 
      tabindex++; //increment tabindex 
      //after increment of tabindex ,make the next element focus 
      $('*').attr('tabindex', tabindex).focus(); 

         **//Msg Label** 
      //Just to print some msgs to see everything is working 
      $('#Msg').text(this.id + " tabindex: " + tabindex 
       + " next element: " + $('*').attr('tabindex').id); 

      return false; // to cancel out Onenter page postback in asp.net 
     } 
    }); 
} 
); 

HTML

<div> 
    Employee Info<br /> 
    Name<br /> 
    <input name="TxtbxName" type="text" value="ok" id="TxtbxName" tabindex="1" /> 
    <br /> 
    Age<br /> 
    <input name="TxtbxAge" type="text" id="TxtbxAge" tabindex="2" /> 
    <br /> 
    Gender<br /> 
    <select name="DdlGender" id="DdlGender" tabindex="3"> 
     <option selected="selected" value="Male">Male</option> 
     <option value="Female">Female</option> 
    </select> 
    <br /> 
    <div> 
     Previous Employment<br /> 
     <select name="DdlCompany" id="DdlCompany" tabindex="4"> 
    <option selected="selected" value="0">Folio3</option> 
    <option value="1">Null Soft</option> 
    <option value="2">Object Soft</option> 
    <option value="3">Excepption Soft</option> 
    </select> 
     &nbsp;&nbsp;or Enter Code&nbsp;&nbsp; 
     <input name="TxtbxCompanyCode" type="text" id="TxtbxCompanyCode" tabindex="5" /> 
     <br /> 
     Address<br /> 
     <input name="TxtbxAddress" type="text" id="TxtbxAddress" tabindex="6" /> 
     <br /> 
     <input type="submit" name="BtnSubmit" value="Submit" id="BtnSubmit" tabindex="7"/> 
     <br /> 
     <label id="Msg">Message here</label> 
    </div> 
</div> 

Daj mi znać, gdzie poszło nie tak:/

Answer 1

Znalazłem kilka drobnych problemów jQuery. Naprawiono tutaj: JSFiddle.

Linia:

$('*').attr('tabindex', tabindex).focus(); 

można zapisać tak:

$('[tabindex=' + tabindex + ']').focus(); 

a to:

$('#Msg').text($(this).id + " tabindex: " + tabindex 
      + " next element: " + $('*').attr('tabindex').id); 

nie dzwoni identyfikator atrybutu drogę jQuery (używasz Składnia JavaScript, ale wynik $ (this) jest obiektem jQuery, więc ... $(this).id staje się $(this).attr('id').

Formularz nadal ma problem z przesłaniem, którego nie zaszedłem zbyt głęboko, ale zmienia on fokus i wypełnia teraz element "#Msg".