Fokus auf nächsten Tabindex von HTML-Element onEnter Tastendruck von JQuery

Question

Hallo Freunde, Ich arbeite an einer kleinen Aufgabe, die den Benutzer Tabindex das HTML-Element bei der Eingabe von Tastendruck ermöglicht.

Als ich neu zu jquery bin, habe ich etwas Code geschrieben, der mir scheint, dass es funktioniert, aber es gibt einige Probleme darin.

Erste Ergebnisse
Der Code Täter, es funktioniert nicht, da der Ausgang in der Msg lablel ist "undefiniert"

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

Der Code ist unten angegeben, und ich habe sogar erstellt ein 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> 

Lassen Sie mich wissen, wo ich schief gelaufen ist:/

Answer 1

fand ich ein paar kleinere jQuery Probleme. Fest hier: JSFiddle.

Diese Zeile:

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

kann wie folgt geschrieben werden:

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

und diese:

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

nicht Aufruf die ID die jQuery-Weg-Attribut (Sie verwenden JavaScript-Syntax, aber das Ergebnis von $ (this) ist ein jQuery-Objekt, also ... $(this).id wird $(this).attr('id').

Das Formular hat immer noch ein Submission-Problem, das ich nicht zu weit vergraben habe, aber es ändert den Fokus und füllt nun das '#Msg'-Element aus.