AutoTab javascript函数问题

Question

we've run into an issue with this while using it in our asp.net application.

The purpose of it is as follows:

• When in a textbox -> tab once MaxLength is reached
• When in a checkbox -> tab once the control is toggled with the keyboard (spacebar)

Asides from buttons, those are the only controls on the form. The function is toggled by the end user (saved by using a cookie).

Issues:

• As you'll notice, it goes about the process fairly randomly. Sometimes it performs quickly, sometimes it doesn't. The way we have the form set presently is with a very large tab index range that will more than likely remain. Not really worried about this issue to be honest, but nice if someone knows what to do.

• Checkbox functionality is working very oddly. Say you have CheckBoxA and CheckBoxB. When you use the keyboard to toggle CheckBoxA, it grays out the box as though it were disabled and sets focus to CheckBoxB. At this point if you use the mouse and click anywhere on the document, it toggles CheckBoxA every time you click and ignoring normal mouse functionality for that area until you right click and then cancel the context menu. If you toggle CheckBoxB after it gains focus from AutoTab with the keyboard, CheckBoxA loses the disabled gray appearance (though it has never toggled) and the cycle repeats with CheckBoxB being the one with issues.

Here is the code important to the function. CheckCookie() is a check to make sure that the user has AutoTab set otherwise AutoTab doesn't happen. Array.contains goes through the array to find if the keycode entered is present in it.

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

The tabbing is done using a sort here (and where the bottleneck of issue #2 comes in I believe):

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

I apologize as this is very lengthy (the issue isn't something I know of having a common name, though I've seen the behavior before), but any assistance you can give with this issue would be very appreciated.

Thanks,

Answer 1

After some modification, this is the solution that ended up working for what we needed. The tabindex aspect of it is quite haphazard, but we got it to work.

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

CodeBehind (demo):

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

ASPX (demo):

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

Answer 2

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