jquery Dialog - Focus sur la zone de texte suivante

Question

J'ai une boîte de dialogue avec un grand formulaire (chaque élément de formulaire est enveloppé dans un DIV, et il y a aussi des étiquettes/info-bulles/etc). Chaque fois qu'un utilisateur touche la 'tabulation', je veux qu'il se concentre sur l'entrée div suivante (.fm-req) (.defaultTextBox2). Voici un exemple du code HTML:

<div class="fm-req"> 
    <label for="">Answer <a href="#" data-toggle="tooltip" data-placement="<?php echo $p;?>" title="Coming Soon..." class="tooltip_popup"><i class="icon-question-sign"></i></a></label> 
    <input name="answer" class="validate[required] defaultTextBox2" maxlength="200" type="text" /> 
    <input type="button" name="default" value="Default"> 
</div> 
<div class="fm-req"> 
    <label for="">Answer2 <a href="#" data-toggle="tooltip" data-placement="<?php echo $p;?>" title="Coming Soon..." class="tooltip_popup"><i class="icon-question-sign"></i></a></label> 
    <input name="answer2" class="defaultTextBox2 percent" type="text" /> 
</div> 

Il pourrait y en avoir plusieurs avec quelques variations différentes. Cependant, je veux juste me concentrer sur le prochain .fm-req.defaultTextBox2. Je l'ai commencé avec quelque chose comme:

$(".defaultTextBox2").keydown(function(event) { 
    if (event.keyCode == 9) { // 9 is tab key 
     $(this).find('.fm-req').next('.defaultTextBox2').focus(); 
    } 
}); 

Mais je ne peux pas sembler le faire fonctionner ...

Answer 1

Il n'y a pas besoin de javascript, il suffit d'utiliser le code HTML tabindex attribut:

<div class="fm-req"> 
    <label for="">Answer <a href="#" data-toggle="tooltip" data-placement="<?php echo $p;?>" title="Coming Soon..." class="tooltip_popup"><i class="icon-question-sign"></i></a></label> 
    <input tabindex="1" name="answer" class="validate[required] defaultTextBox2" maxlength="200" type="text" /> 
    <input type="button" name="default" value="Default"> 
</div> 
<div class="fm-req"> 
    <label for="">Answer2 <a href="#" data-toggle="tooltip" data-placement="<?php echo $p;?>" title="Coming Soon..." class="tooltip_popup"><i class="icon-question-sign"></i></a></label> 
    <input tabindex="2" name="answer2" class="defaultTextBox2 percent" type="text" /> 
</div> 

Answer 2

$(".defaultTextBox2").keydown(function(event) { 
    if (event.keyCode == 9) { // 9 is tab key 
     event.preventDefault(); 
     $(this).parent().nextAll('.fm-req:has(.defaultTextBox2)').first().find('.defaultTextBox2').focus(); 
    } 
});