Pythontr

husonet | Tarih: 01.11.2016

javascript ile textboxlar arası otomatik geçiş

javascript ile textbox'ın maximum uzunluğu dolduğunda otomotik sonraki textbox'a geçiş nasıl sağlanır?

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!