AutoTab javascript 함수 문제

우리는 asp.net 응용 프로그램에서이 문제를 사용하고 있습니다.AutoTab javascript 함수 문제

다음과 같이의 목적은 다음과 같습니다

텍스트 상자의 경우 -> 최대 길이 한 번 탭에 도달
체크 박스의 경우 -> 제어 한 번 탭 키보드 (스페이스 바)로 전환한다

단추 이외의 단추는 폼의 유일한 컨트롤입니다. 이 기능은 최종 사용자에 의해 토글됩니다 (쿠키를 사용하여 저장 됨).

문제 :

당신이 알 수 있듯이, 그것은 매우 무작위 과정에 대해갑니다. 때로는 빨리 수행 할 수 있지만 가끔은 수행하지 않는 경우가 있습니다. 현재 양식을 설정하는 방법은 매우 큰 탭 색인 범위를 유지하는 것보다 더 많이 남습니다. 솔직히이 문제에 대해 정말로 걱정하지는 않지만, 누군가가 무엇을해야하는지 잘 알고 있다면 좋을 것입니다.
체크 박스 기능이 매우 이상하게 작동합니다. 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);      
      } 
     } 
    } 
}}

Tab 키를 눌렀을 여기 정렬을 사용하여 수행됩니다 (문제 # 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 측면은 매우 무의미하지만 작동하도록했습니다.

자바 스크립트 :

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 함수 문제

답변

관련 문제