jquery : 다른 필드 세트에서 다음 입력을 선택하십시오.

Question

다음 html 페이지가 있습니다.

<form action="editProfile" id="userInformation"> 
<fieldset id="birthdate"> 
<label><input type="text" id="day" maxlength="2"/>/<input type="text" id="month" maxlength="2"/>/<input type="text" id="year" maxlength="2"/> 
</fieldset> 
<fieldset> 
<label>Name</label><input type="text" id="name"/> 
</fieldset> 
</div> 

이제 항상 다음 입력 필드로 이동하고 싶습니다. 나는 시도했다 :

$("#birthdate input[type=text]").keyup(function(e){ 
    if($(this).val().length == $(this).attr('maxlength')){ 
     $(this).next(":input").focus(); 
    } 
}); 

하지만 그 fieldset 이내에 머물 것으로 보인다. 그리고 nextall은 작동하지 않거나 잘못 사용하고 있습니다.

편집 : 지금까지의 내 솔루션 :

  if($(this).val().length == $(this).attr('maxlength')){ 
      if($(this).parent().children().last().attr('id') == $(this).attr("id")){ 
       $(this).parent().next().find(':input').focus(); 
      }else{ 
       $(this).next("input").focus(); 
      } 
     } 

Answer 1

:

function goToInput(distance) { 
    var $input = $(this), 
     $inputs = getInputs(), 
     currentIndex = $inputs.index($input), 
     newIndex = ($inputs.length + currentIndex + distance) % $inputs.length; 

    if (currentIndex > -1) { 
     $input.blur(); 
     $inputs.eq(newIndex).focusin().focus(); 
    } 
} 

function getInputs() { 
    return $('#userInformation :input:visible:enabled'); 
} 

function goToNextInput() { 
    goToInput.apply(this, [1]); 
} 

function goToPreviousInput() { 
    goToInput.apply(this, [-1]); 
} 

다음

getInputs().keyup(goToNextInput); 

Answer 2

사용자 정의 메소드를 사용하여 솔루션 (http://jsfiddle.net/jamiec/uQdSS/ 작업 예)입니다 그것의 논리는 fieldset의 마지막 항목입니다.

Answer 3

이것은 하나의 해결책입니다. 아마 없을 최고의 솔루션하지만 사이클에 대한 입력을 노년 나머지 연산자를 사용하여 작동하는 것 같다 :

(function() { 
    var inputs = $("#userInformation input[type=text]"), 
     i = 0, 
     length = inputs.length; 

    inputs.keyup(function(e) { 
     if ($(this).val().length == $(this).attr('maxlength')) { 
      i = ++i % length; 
      inputs[i].focus(); 
     } 
    }); 

}()); 

예 : http://jsfiddle.net/jonathon/DysJe/

나는 또한 입력에 대한 선택을 변경했습니다. birthdate 필드 집합을 선택하는 대신 양식의 모든 입력을 선택합니다. 이들을 배열에 집어 넣고 그 위에 초점을 맞추어 순환하십시오. 내가 만든 변수를 다른 모든 것과는 숨겨두기 위해 모든 것을 넣어 두었습니다.

마지막 입력에 도달하면 그냥 멈추고 (maxlength이 설정되지 않은 경우) 또는 처음부터 다시 초점을 순환시킵니다. 순환을 원하지 않으면 모듈러스 연산자를 제거하십시오.

그것은 단점하지만 가지고 : 사용자가 첫 번째 요소에 초점을하지 않는 경우 다음이를 무시하고 단지 등

---

나는 세 번째 두 번째, 초점을 맞추기 위해 이동을 이것에 관해 조금 더 많은 것을했고 다른 변수에 대한 필요성을 제거했습니다. 이 중 하나가 비행 중에 다음 하나를 작동하지 않습니다, 그것은 매우 시작에서 설정됩니다. 각 input은 다음 요소 인 i이 아닌 inputs 목록의 다음 항목을 집중하도록 이벤트가 설정되어 있습니다. 등이 세 번째로 진행됩니다 두 번째,

(function() { 
    var inputs = $("#userInformation input"); 

    inputs.each(function(i, item) { 
     $(item).keyup(function() { 
      if ($(this).val().length == $(this).attr('maxlength') && inputs[i + 1]) { 
       inputs[i + 1].focus(); 
      } 
     }); 
    }); 
}()); 

http://jsfiddle.net/jonathon/TQzKS/

을에 대한 사용자 탭 당신은 할 수 있습니다, 그래서 만약이 위처럼하지주기를 통한하지만 제대로 이동합니다 입력 요소에 대해서도 tabIndexes을 설정하십시오. 나는 jQuery가 아이템을 리턴하는 순서에서 100 %는 아니지만, DOM 구조에 기반 할 수 있다고 생각한다. 주문에 특별한 것이없는 경우 .each 부분을 실행하기 전에 inputs 목록을 정렬하려면 tabIndex 요소의 값을 사용할 수 있습니다.

오 예,이 두 예에서 모두 입력을 마친 후 바로 이동하도록 keyup 이벤트를 설정했습니다.

Answer 4

나는 어떤 잘 작동, 최근이 같은 것을 사용 : 나는 또한 나의 주에 추가 알고

$("#birthdate input[type=text]").keyup(function(e){ 
    if($(this).val().length == $(this).attr('maxlength')){ 
     var $next = $(this).next(":input"); 
     if ($next.length == 0) // there are no next fields! try another fieldset 
     $next = $(this).closest("fieldset").next("fieldset").find(":input:first"); 
     $next.focus(); 
    } 
}); 

Answer 5

이 시도 게시하지만 댓글을 더 쉽게받을 수 있습니다. 많은 해결 방법이있는 것처럼 보입니다. 지금은

내 자신의 솔루션 :

if($(this).val().length == $(this).attr('maxlength')){ 
      if($(this).parent().children().last().attr('id') == $(this).attr("id")){ 
       $(this).parent().next().find(':input').focus(); 
      }else{ 
       $(this).next("input").focus(); 
      } 
     } 

나는 내가 probabily 약간의 경우 두 번째 단순화 수 있다고 생각하면서도 유연한 꽤 straightfoward을 유지하기 위해 노력했다.