javascript Maxlen의 다음 양식 필드로 건너 뛰기

Question

사용자가 특정 필드의 최대 숫자를 입력 할 때 3 개의 필드가있는 전화 번호를 수집하는 양식이 있습니다. 자동으로 다음 입력 필드로 건너 뛰고 싶습니다. ID를 모든 동적 ID로 요소를 잡기 위해 너무 하드 생성 그래서

HTML을

<!-- Other inputs above --> 
    <label>Telephone Number</label> 
    <input type="text" class="phone" size="3" maxlength="3" onkeyup="checkLen(this,this.value)"> 
    <input type="text" class="phone" size="3" maxlength="3" onkeyup="checkLen(this,this.value)"> 
    <input type="text" class="phone" size="4" maxlength="4" onkeyup="checkLen(this,this.value)"> 

asp.net 백엔드 작업 얻을 것으로 보인다.

자바 스크립트

function checkLen(x, y) { 
    if (y.length == x.maxLength) { 
     var next = x.tabIndex; 
     if (next < document.getElementsByClassName("phone").length) { 
      document.getElementsByClassName("phone").elements[next].focus(); 
     } 
    } 
} 

Answer 1

당신이 jQuery를 사용하는 가정.

대신 위처럼 바인딩으로 tabindex

$(".phone").keyup(function() { 
    if (this.value.length == this.maxLength) { 
     $(this).next('.phone').focus(); 
    } 
}); 

는 또한 onclick 속성 핸들러를 제거 사용하려고의 다음 입력으로 이동할 수 있습니다.