AutoTab javascript功能问题

我们在使用asp.net应用程序时遇到了这个问题。AutoTab javascript功能问题

它的目的如下：

当在文本框 - >到达标签一次的MaxLength
当在复选框 - >标签一旦控制被切换与所述键盘（空格）

除了按钮，这些是窗体上唯一的控件。该功能由最终用户切换（使用cookie保存）。

问题：

正如你会发现，这是不言而喻有关过程相当随意。有时候它表现的很快，有时却没有。我们目前设置的表单的方式是非常大的标签索引范围，这个范围很可能会保留下来。老实说，这不是真的担心这个问题，但如果有人知道该怎么做，那就很好。
复选框功能工作异常奇怪。假设你有CheckBoxA和CheckBoxB。当您使用键盘切换CheckBoxA时，它会将该盒子灰色化，就像它被禁用并将焦点设置为CheckBoxB。此时，如果您使用鼠标并单击文档上的任意位置，则每次单击时都会切换CheckBoxA，并忽略该区域的正常鼠标功能，直到您右键单击并取消上下文菜单。如果您在通过键盘从AutoTab获得焦点后切换CheckBoxB，则CheckBoxA会丢失禁用的灰色外观（尽管它从未切换过），并且CheckBoxB是有问题的重复。

这里是对函数重要的代码。 CheckCookie（）是一项检查，以确保用户具有AutoTab设置，否则AutoTab不会发生。 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);      
      } 
     } 
    } 
}}

的黏合在这里使用排序完成（并在问题＃2的瓶颈进来，我相信）：

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

我道歉，因为这是很长的（这个问题是不是我知道有一个共同的名字，虽然我已经看到过这种行为），但任何援助，你可以给这个问题将非常感激。

谢谢，

来源

2010-08-11 Robert

经过一些修改后，这是解决方案，最终为我们所需要的工作。它的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(); 
}

代码隐藏（演示）：

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（演示）：

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

来源

2011-01-06 19:19:25 Robert

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

来源

2013-05-30 07:02:29 Homesh

AutoTab javascript功能问题

回答

相关问题