attenzione alla prossima tabindex di elemento HTML onEnter pressione di un tasto per JQuery

Question

Ciao amici, sto lavorando su un piccolo compito che è quello di consentire all'utente di TabIndex l'elemento HTML su entrare pressione di un tasto.

Come nuovo a jQuery, ho scritto un codice che mi sembra che funzionerà, ma ci sono alcuni problemi in esso.

I primi risultati
Il codice colpevole, doesnt lavoro, come l'output nel lablel MSG è "indefinito"

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

Il codice è riportato qui di seguito e ho persino creato un 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> 

farmi sapere dove ho sbagliato:/

Answer 1

ho trovato un paio di problemi minori jQuery. Risolto qui: JSFiddle.

Questa linea:

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

si può scrivere in questo modo:

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

e questo:

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

non sta chiamando l'attributo id il modo jQuery (che si sta utilizzando Sintassi JavaScript, ma il risultato di $ (this) è un oggetto jQuery. Quindi ... $(this).id diventa $(this).attr('id').

Il modulo ha ancora un problema di sottomissione, che non ho scavato troppo in profondità, ma cambia lo stato attivo e compila l'elemento "#Msg" ora.