Auto tab credit card text boxes in ASP.Net

Question

I have developed the payment page in one of my project and there is an option for credit card payment where I need to implement auto tab functionality like when User type 4 characters in first text box it should move immediately to the next text box.

Any suggestions using either java script or jQuery?

Listen for the "keyup" event, then check the value's length. If it's 4, focus the next element — Ian, Aug 10 '13 at 07:44

score 2 · Answer 1 · answered Oct 28 '13 at 10:08

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

<b>Enter your credit card number ex (1111-2222-3333-4444):</b>
<form name="card">
<input type="text" name="card1" 
size=4 onKeyup="autotab(this, document.card.card2)" maxlength=4>- 
<input type="text" name="card2" 
size=4 onKeyup="autotab(this, document.card.card3)" maxlength=4>- 
<input type="text" name="card3" 
size=4 onKeyup="autotab(this, document.card.card4)" maxlength=4>- 
<input type="text" name="card4" size=4 maxlength=4>
</form>

i think that this would be more elegant :)

score 0 · Accepted Answer · answered Aug 10 '13 at 07:50

Ok - I got it.

 jQuery("#<%=txt1.ClientID %>").keyup(
        function changefocus() {
            if (jQuery("#<%=txt1.ClientID %>").val().length >= jQuery("#<%=txt1.ClientID %>").attr('maxlength'))
                jQuery("#<%=txt2.ClientID %>").focus();
        });
 jQuery("#<%=txt2.ClientID %>").keyup(
        function changefocus() {
            if (jQuery("#<%=txt2.ClientID %>").val().length >= jQuery("#<%=txt2.ClientID %>").attr('maxlength'))
                jQuery("#<%=txt3.ClientID %>").focus();
        });

Auto tab credit card text boxes in ASP.Net

2 Answers2