Question

我正在写支付页面，有4个文本框用于信用卡号码输入和后面的数字设置焦点在另一个控件我做的第一个文本框我的javascript代码工作正常但其他文本框不起作用...这里是我的代码.. ：

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

代码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()");

谢谢......

Answer 1

使用==进行比较。

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

Answer 2

您可以拥有“通用”代码，而不依赖于文本框的ID或名称，另外只允许数字作为奖励。

首先，用单个容器包装所有文本框，然后像这样给它们maxlength：

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

现在你所要做的就是拥有这样的JS代码并完成所有工作：

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

基本上，代码将获取容器中的所有文本框元素，并分配它们的onkeypress事件，以便只能按下数字，当达到最大长度时，会聚焦下一个包含全局数组的文本框。它们。

计时器用于允许浏览器更改文本框的值，否则立即设置焦点将“取消”按键，值不会改变。

可以使用实时测试用例here，尝试搞乱代码并了解其工作原理。：）

Answer 3

我将keyup事件绑定到文本框

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

设置焦点文本框onkeypressed

3 个答案: