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?

Was it helpful?

Solution 2

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();
        });

OTHER TIPS

<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 :)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top