javascript - Jquery changing focused input -

i trying make system when fill text box moves onto next. have code:

 $('#txt1').keyup(function() {     if(this.value.length == $(this).attr('maxlength')) {        $('#txt2').focus();     }  }); 

i want make continues go on echo #txt3 #txt4 ect. there way change focused text box via arrow keys. e.g. when arrow key pressed selected changed #txt4 #txt3 , opposite down key.

thanks in advance.

here code address first question. added class attribute convenience , replaced "maxlength" attribute html "size" attribute.

html

<p><input type="text" class="navigable" id="txt1" data-number="1" size="2" placeholder="dd"></p> <p><input type="text" class="navigable" id="txt2" data-number="2" size="2" placeholder="mm"></p>       <p><input type="text" class="navigable" id="txt3" data-number="3" size="4" placeholder="yyyy"></p>      

js

$('.navigable').keyup(function() { var self = $(this); var next = $('#txt'+(self.data('number')+1)); if(next.length > 0 && self.val().length == self.attr('size')) {    next.focus(); } 

});

you can try here

i have doubts concerning request arrow keys binding. happens if user wants navigate in 1 of inputs? nevertheless, here code take account arrow keys:

html

<p><input type="text" class="navigable" id="txt1" data-number="1" size="2" placeholder="dd"></p> <p><input type="text" class="navigable" id="txt2" data-number="2" size="2" placeholder="mm"></p> <p><input type="text" class="navigable" id="txt3" data-number="3" size="4" placeholder="yyyy"></p> 

js

$('.navigable').keyup(function(e) {   var self = $(this);   var currentinput = self.data('number');   var next = $('#txt'+ (currentinput + 1));   var previous = $('#txt'+ (currentinput - 1));   var keycode = e.keycode || e.which;   if(next.length && keycode === 40)       next.focus();   else if(previous.length && keycode === 38)       previous.focus();   else if(next.length && self.val().length == self.attr('size')) {      next.focus();   } 

});

you can try here