This will show three text boxes, that when you type will jump from box to box depending on max size of box.
This example is used for dates of birth, it will auto append a zero where needed.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<input type="text" name="day" id="box1" maxlength="3" onkeyup="movetoNext(this, 'box2')" onblur="addzero()"> <input type="text" name="month" id="box2" maxlength="3" onkeyup="movetoNext(this, 'box3')" onblur="addzeromonth()"> <input type="text" name="year" id="box3" maxlength="4" onblur="addyear()"> <script type="text/javascript"> function addyear() { var current=document.getElementById('box3').value; if (current.length==2) { var yearprefix=19; document.getElementById('box3').value = yearprefix+current; } } function addzero() { var current=document.getElementById('box1').value; if (current=="") { document.getElementById('box1').value = ""; } else if (current<9 && current.length<2) { var zero=0; document.getElementById('box1').value = zero+current; }; }; function addzeromonth() { var current=document.getElementById('box2').value; if (current=="") { document.getElementById('box2').value = ""; } else if (current<9 && current.length<2) { var zero=0; document.getElementById('box2').value = zero+current; }; } function movetoNext(current, nextFieldID) { if (current.value.length >= current.maxLength) { document.getElementById(nextFieldID).focus(); } } </script> |
Basic Textbox jump
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<input type="text" name="day" id="box1" maxlength="3" onkeyup="movetoNext(this, 'box2')" > <input type="text" name="month" id="box2" maxlength="3" onkeyup="movetoNext(this, 'box3')"> <input type="text" name="year" id="box3" maxlength="4"> <script> function movetoNext(current, nextFieldID) { if (current.value.length >= current.maxLength) { document.getElementById(nextFieldID).focus(); } } </script> |
