javascript ile textboxlar arası otomatik geçiş

html kodu aşağıdkai şekilde olan bir örnek form üzerinde örnekleyelim.

<b>Kredi Kartı Numaranızı Giriniz? Örnek(1234-5678-9012-3456):</b>
<form name="kart">
<input type="text" name="kart1" size=4  maxlength=4>
<input type="text" name="kart2" size=4 maxlength=4>
<input type="text" name="kart3" size=4  maxlength=4>
<input type="text" name="kart4" size=4 maxlength=4>
</form>

Yukarıdaki formda 16 haneli sayıyı 4 kısıma ayrılmış bir şekilde hazırlanan form vardır. Her textbox'ın uzunluğunu 4 olarak ayarladık. Ve textbox'ın maximum uzunluğu olduğunda otomotik olarak bir sonraki textbox'a geçmesini istiyoruz.

Bunu aşağıdaki şekilde javascript kodu ile sağlayabiliriz.

<script>
function autotab(current,to){
if (current.getAttribute && 
current.value.length==current.getAttribute("maxlength")) {
to.focus() 
}
}
</script>

Bu yeterli olmayacaktır. Şimdi aşağıdaki şekilde textboxların onKeyup özelliğini ekleyelim.

<b>Kredi Kartı Numaranızı Giriniz? Örnek(1234-5678-9012-3456):</b>
<form name="kart">
<input type="text" name="kart1" size=4  maxlength=4 onKeyup="autotab(this, document.kart.kart2)">
<input type="text" name="kart2" size=4 maxlength=4 onKeyup="autotab(this, document.kart.kart3)" >
<input type="text" name="kart3" size=4  maxlength=4 onKeyup="autotab(this, document.kart.kart4)">
<input type="text" name="kart4" size=4 maxlength=4>
</form>

Şimdi istediğimizi yaptık. Kolaylıklar!