set focus textboxes onkeypressed

im writing payment page and there is 4 textbox for credit card number entry and after for digits set focus on another control i did for first textbox my javascript code works well but other textboxes开发者_开发问答 doesnt work... here is my code...:

<script type="text/javascript">
    function Length_txtCardNumber1_Validator() {
        if (document.getElementById('<%= txtCardNumber1.ClientID %>').value.length = 4) {
            document.getElementById('<%= txtCardNumber2.ClientID %>').focus();
            return (false);
        }
        return (true);
    }


    function Length_txtCardNumber2_Validator() {
        if (document.getElementById('<%= txtCardNumber2.ClientID %>').value.length = 4) {
            document.getElementById('<%= txtCardNumber3.ClientID %>').focus();
            return (false);
        }
        return (true);
    }

    function Length_txtCardNumber3_Validator() {
        if (document.getElementById('<%= txtCardNumber3.ClientID %>').value.length = 4) {
            document.getElementById('<%= txtCardNumber4.ClientID %>').focus();
            return (false);
        }
        return (true);
    }
</script>

code behind onpage_load :

txtCardNumber1.Attributes.Add("onkeypress", "return Length_txtCardNumber1_Validator()");
txtCardNumber2.Attributes.Add("onkeypress", "return Length_txtCardNumber2_Validator()");
txtCardNumber3.Attributes.Add("onkeypress", "return Length_txtCardNumber3_Validator()");

thank you...

Use == for comparison.

function Length_txtCardNumber3_Validator() {
    if (document.getElementById('<%= txtCardNumber3.ClientID %>').value.length == 4) {
        document.getElementById('<%= txtCardNumber4.ClientID %>').focus();
        return (false);
    }
    return (true);
}

You can have "generic" code without depending on ID or name of the textboxes, plus allowing only digits as a bonus.

First, wrap all textboxes with single container and give them maxlength like this:

<div id="CreditCardPanel">
    <asp:Textbox id="txtCardNumber1" runat="server" Columns="3" MaxLength="4" /> -
    <asp:Textbox id="txtCardNumber2" runat="server" Columns="3" MaxLength="4" /> -
    <asp:Textbox id="txtCardNumber3" runat="server" Columns="3" MaxLength="4" /> -
    <asp:Textbox id="txtCardNumber4" runat="server" Columns="3" MaxLength="4" />
</div>

Now all you have to do is having such JS code and it's all done:

<script type="text/javascript">
var arrCreditCardInputs = [];
window.onload = function WindowLoad() {
    var arrInputs = document.getElementById("CreditCardPanel").getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
        var oCurInput = arrInputs[i];
        if (oCurInput.type == "text") {
            oCurInput.onkeypress = function(event) {
                //allow digits only:
                var keyCode = event.keyCode || event.which;
                if (keyCode >= 48 && keyCode <= 57) {
                    if (this.value.length + 1 >= this.maxLength) {
                        var index = parseInt(this.getAttribute("arr_index"), 10);
                        var nextIndex = ((index + 1) % arrCreditCardInputs.length);
                        window.setTimeout(function() {
                            arrCreditCardInputs[nextIndex].focus();
                        }, 200);
                    }
                    return true;
                }
                else {
                    return false;
                }
            }

            oCurInput.setAttribute("arr_index", i + "");    
            arrCreditCardInputs.push(oCurInput);
        }
    }
}
</script>

Basically, the code is taking all the textbox elements in the container, and assign their onkeypress event so that only digits can be pressed and when reaching the maximum length focus the next textbox as defined in the global array containing them.

Timer is used to allow the browser a chance to change the value of the textbox, otherwise setting focus immediately will "cancel" the key press and the value won't change.

Live test case is available here, try messing around with the code and understand how it works. :)

I bound the keyup event to the textboxes

        $('#ccNumber1').bind('keyup',function () {
            if ($(this).val().length == 4)
                $('#ccNumber2').focus();
        });