Déplacer mise au point lorsque le numéro d'entrée maxlength est atteinte

Question

J'ai une forme, étaient utilisateurs doivent entrer leur date de naissance:

<div class="form-group"> 
     <label for="day" class="sr-only">[[%day]]</label> 
     <input type="number" min="0" max="31" maxlength="2" class="form-control input-lg name="day" value="[[+day]]" placeholder="day"> 
</div> 
<div class="form-group"> 
     <label for="day" class="sr-only">[[%day]]</label> 
     <input type="number" min="0" max="31" maxlength="2" class="form-control input-lg name="day" value="[[+month]]" placeholder="month"> 
</div> 
<div class="form-group"> 
     <label for="day" class="sr-only">[[%day]]</label> 
     <input type="number" min="0" max="31" maxlength="4" class="form-control input-lg name="day" value="[[+year]]" placeholder="year"> 
</div> 

Je comprends que type="number" ne supporte pas l'attribut maxlength.

Je dois faire comme ceci:

Lorsque les entrées des clients 2 chiffres dans day, le champ d'entrée suivante devient automatiquement ciblée et ainsi de suite ... Seuls les numéros sont autorisés pour l'entrée.

Merci!

Answer 1

Essayez quelque chose comme ceci. (Vous devez importer jquery lib.)

<input type="number" id="date"> 
<input type="number" id="date"> 

<script> 
    txt_day=$("#day"); 
    txt_year=$("#year"); 
    txt_day.change(function(){ 
    if(tt_day.val().length; 
    txt_year.focus(); 
    } 

</script>