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功能問題

回答

相關問題