AutoTab javascript函数问题

我们在asp.net应用程序中使用它时遇到了一个问题

其目的如下：

• 当到达MaxLength时，在文本框->选项卡中
• 使用键盘（空格键）切换控件后，在复选框->选项卡中

除了按钮之外，这些是表单上唯一的控件。该函数由最终用户切换（使用cookie保存）

问题：

• 正如你所注意到的，这个过程是相当随机的。有时它执行得很快，有时却不行。我们目前拥有表单集的方式是使用非常大的选项卡索引范围，这很可能会保留。老实说，我不是真的担心这个问题，但如果有人知道该怎么办，那就好了

• 复选框功能的工作非常奇怪。假设你有CheckBoxA和CheckBoxB。当您使用键盘切换CheckBoxA时，它会使框变灰，就像它已被禁用一样，并将焦点设置为CheckBoxB。此时，如果使用鼠标并单击文档上的任何位置，则每次单击并忽略该区域的正常鼠标功能时，它都会切换CheckBoxA，直到右键单击然后取消关联菜单。如果在CheckBoxB使用键盘从AutoTab获得焦点后切换CheckBoxB，CheckBoxA将丢失禁用的灰色外观（尽管它从未切换），并且循环将重复，CheckBoxB是有问题的一个

下面是对函数很重要的代码。CheckCookie（）是一项检查，用于确保用户已设置自动选项卡，否则不会发生自动选项卡。Array.contains遍历数组以查找其中是否存在输入的键码

function test(input, inputClientID, e) {
if (checkCookie()) {
    var acceptedChars = ["48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "65", "66", "67", "68", "69", "70", "71", "72", "73", "74", "75", "76", "77", "78", "79", "80", "81", "82", "83", "84", "85", "86", "87", "88", "89", "90", "96", "97", "98", "99", "100", "101", "102", "103", "104", "105", "106", "107", "108", "109", "110", "111", "186", "187", "188", "189", "190", "191", "192", "219", "220", "221", "222"];
    if (input.type == "text") {
        len = document.getElementById(inputClientID).getAttribute("MaxLength");
        curLen = document.getElementById(inputClientID).getAttribute("Value");
        if ((len != null) && (len != "") && (curLen != null) && (curLen != "")) {
            if (len <= curLen.length) {
                var keycode;
                if (window.event) keycode = window.event.keyCode;


                if (e.shiftKey == true && keycode == 9) {
                    return;
                }
                else if (acceptedChars.contains(keycode)) { //(e.shiftKey == false && keycode != 9)
                    tabNextCtrl(input);
                }
            }
        }
    }
    else if (input.type == null) {
        if (input.firstChild.type == "checkbox") {
            var keycode;
            if (window.event) keycode = window.event.keyCode;

            if (keycode == 32) {

                //if (input.firstChild.checked) {
                //    input.firstChild.checked = false;
                //}
                //else {
                //    input.firstChild.checked = true;
                //}
                tabNextCtrl(input.firstChild);                    
            }
        }
    }
}}

功能测试（输入，inputClientID，e）{
if（checkCookie（））{
接受的风险值字符=[“48”、“49”、“50”、“51”、“52”、“53”、“54”、“55”、“56”、“57”、“65”、“66”、“67”、“68”、“69”、“70”、“71”、“72”、“73”、“74”、“75”、“76”、“77”、“78”、“79”、“80”、“81”、“82”、“83”、“84”、“85”、“86”、“87”、“88”、“89”、“90”、“96”、“97”、“98”、“99”、“100”、“101”、“102”、“103”、“104”、“105”、“106”、“108”、“109”、“110”、“111”、“186”, "187", "188", "189", "190", "191", "192", "219", "220", "221", "222"];
如果（input.type==“text”）{
len=document.getElementById（inputClientID.getAttribute（“MaxLength”）；
curLen=document.getElementById（inputClientID.getAttribute（“值”）；
如果（（len！=null）&&&（len！=null）&&&&（curLen！=null）&&&（curLen！=null）{
if（len input.tabIndex）&&（input.form.elements[i].tabIndex

我很抱歉，因为这太长了（我不知道这个问题有什么共同的名字，虽然我以前见过这种行为），但如果您能在这个问题上提供任何帮助，我将不胜感激

---

谢谢，

经过一些修改后，这个解决方案最终满足了我们的需要。它的tabindex方面非常随意，但我们已经成功了

JavaScript:

function Tab(currentField, e) {
    if (!(e.keyCode == 9 & e.shiftKey)) {
        if (currentField.value.length == currentField.maxLength) {
            if (e.keyCode != 16 & e.keyCode != 9) {
                tabNextCtrl(currentField);
            }
        }

        if (currentField.type == "checkbox") {
            tabNextCtrl(currentField);
        }
    }
}

function tabNextCtrl(input) {
    var tbIndex = input; 
    var aIndex = 99999999;
    for (i = 0; i < input.form.elements.length; i++) {
        if ((input.form.elements[i].tabIndex > input.tabIndex) && 
            (input.form.elements[i].tabIndex < aIndex)) {
            aIndex = input.form.elements[i].tabIndex; 
            tbIndex = input.form.elements[i];
        }
    }
    tbIndex.focus(); 
} 

ASPX（演示）：

功能选项卡（当前字段，e）{
如果（！（e.keyCode==8 | | e.keyCode==37））{
如果（currentField.value.length==currentField.maxLength）{
$（currentField）.next（'input'）.focus（）；
}
}
否则{
如果（currentField.value.length==0）{
$（currentField）.prev（'input'）.focus（）；
}
}
}

function Tab(currentField, e) {
    if (!(e.keyCode == 9 & e.shiftKey)) {
        if (currentField.value.length == currentField.maxLength) {
            if (e.keyCode != 16 & e.keyCode != 9) {
                tabNextCtrl(currentField);
            }
        }

        if (currentField.type == "checkbox") {
            tabNextCtrl(currentField);
        }
    }
}

function tabNextCtrl(input) {
    var tbIndex = input; 
    var aIndex = 99999999;
    for (i = 0; i < input.form.elements.length; i++) {
        if ((input.form.elements[i].tabIndex > input.tabIndex) && 
            (input.form.elements[i].tabIndex < aIndex)) {
            aIndex = input.form.elements[i].tabIndex; 
            tbIndex = input.form.elements[i];
        }
    }
    tbIndex.focus(); 
} 

protected void Page_Load(object sender, EventArgs e)
    {
        this.CheckBox1.Attributes["onclick"] = "Tab(this, event)";
        this.CheckBox2.Attributes["onclick"] = "Tab(this, event)";
        this.TextBox1.Attributes["onkeyup"] = "Tab(this, event)";
    }

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script language="javascript" src="Scripts/autotab.js" type="text/javascript"></script>
<asp:CheckBox ID="CheckBox1" runat="server" TabIndex="1" Text="First" />
<br />
<asp:CheckBox ID="CheckBox2" runat="server" TabIndex="2" Text="Second" />
<br />
<asp:TextBox ID="TextBox1" runat="server" TabIndex="3" MaxLength="4" Width="4em" />
<br />
<asp:CheckBox ID="CheckBox3" runat="server" TabIndex="4" Text="Last" />

 function Tab(currentField, e) {

    if (!(e.keyCode == 8 || e.keyCode == 37) ) {
        if (currentField.value.length == currentField.maxLength) {   
            $(currentField).next('input').focus();
        }
    }
    else{

        if (currentField.value.length == 0) {   
            $(currentField).prev('input').focus();

        }

    }

  }

<input name="phone" id="phone" class="input20p" onkeyup='Tab(this,event)'  maxlength="3"  type="text" border="0">
<input  maxlength="3" class="input20p" name="phone1"   type="text" border="0"   onkeyup='Tab(this,event)'>
<input class="input20p" name="phone2" maxlength="4"   type="text" border="0" onkeyup='Tab(this,event)'  >