JQuery의 자동 탭

Question

autotab.js를 내 응용 프로그램에 다운로드했습니다. 내 응용 프로그램에서 autotab.js를 사용하려고합니다.

양식이 있는데, 한 입력 필드를 채운 후에 다음 입력 DOM 요소에 자동 탭을 쓰고 싶습니다. 또한 양식이 페이지에서만 생성되므로 필드 ID가있는 autotab을 알려진 것으로 사용할 수 없습니다 JQuery를 사용하는 방법.

Answer 1

입력에 ID를 추가 할 수없는 경우 해당 속성에 대해 다른 선택자를 찾아야합니다.

이 데이터를 보내려는 경우 태그 이름을 사용했을 수 있습니다. 그런 다음 다음 선택하여 이름으로 다음 입력을 일치시킬 수 있습니다 : 그렇지 않으면

$('input[name=nextInputName]') 

을, 당신은 항상, children() 및 parent() 메소드 호출의 조합을 사용하여 다음 요소를 찾아 다음에 현재의 입력에서 통과하기 위해 수 .

개인적으로 HTML에서 할 수 없다면 jQuery에서도 id를 할당하는 것이 가장 간단한 해결책이라고 생각합니다. 자동 포커스를 쉽게 할 수 있습니다.

var counter = 0; 
$('input').each(function() { 
    if (!$(this).attr('id')) { 
     $(this).attr('id', 'autofocus' + counter); 
     counter += 1; 
    } 
}); 

선택기를 변경하여 자동 초점 기능을 사용하지 않으려는 일부 요소를 건너 뛸 수 있습니다. 그런 다음도 아래로 쓸 수

는 몇 줄에 자신을 자동 초점 :

$('input[id^=autofocus]').keyup(function() { 
    if ($(this).val().length === $(this).attr('maxlength')) { 
     var id = $(this).attr('id').match(/^autofocus(\d+)$/[1]); 
     var nextId = Number(id) + 1; 
     $('#autofocus' + nextId).focus() 
    } 
}); 

Answer 2

이 기능은 입력에 설정된 최대 길이를 읽어 보시기 바랍니다. $ ('input.autotab')을 사용하여 호출 할 수 있습니다. autotab();

JQuery와 기능은 다음과 같다 :

$.fn.autotab = function(){ 
$(this).keyup(function(e){ 
     switch(e.keyCode){ 
       // ignore the following keys 
       case 9: // tab 
         return false; 
       case 16: // shift 
         return false; 
       case 20: // capslock 
         return false; 
       default: // any other keyup actions will trigger 
         var maxlength = $(this).attr('maxlength'); // get maxlength value 
         var inputlength = $(this).val().length; // get the length of the text 
         if (inputlength >= maxlength){ // if the text is equal of more than the max length 
           $(this).next('input[type="text"]').focus(); // set focus to the next text field 
         } 
     } 
}); 

};

Answer 3

이렇게 자동 탭 기능이 작동합니다. 희망은 다른 사람들을 돕는다.

<input type="tel" id="areaPhone" name="areaPhone" data-next-field="prefixPhone" maxlength="3"> 
<input type="tel" id="prefixPhone" name="prefixPhone" data-next-field="suffixPhone" maxlength="3"> 
<input type="tel" id="suffixPhone" name="suffixPhone" maxlength="4"> 

/* * jQuery를 준비/

$('input[type=tel]').keyup(function() { 

/* Steps: 
    1. Get length values from field 
    2. Get maxlength value of field and convert to integer 
    3. Get data-next-field value of next field to focus on 
    4. Concat a hashtag and data value of field to jump to 
*/ 

var fieldVal = $(this).val(), 
    fieldLen = fieldVal.length, 
    fieldMaxLen = parseInt($(this).attr('maxlength')), 
    jumpToField = $(this).data('next-field'), 
    nextFieldID = '#' + jumpToField; 

// Check if field length and maxlength are equal 
if (fieldMaxLen === fieldLen) { 

    // Check if data-next-field attribute is undefined or null 
    if (jumpToField === undefined || jumpToField === null) { 

    } else { 
     $(nextFieldID).focus(); 
    } 
} 

});