사용자 유형이 빠르면 포커스가 건너 뜁니다.

Question

웹 페이지에서 날짜 입력을 처리하고 있습니다. 3 개의 입력 필드로 날짜가 있습니다. 계획은 첫 번째 필드에 두 개의 문자가 입력 된 경우 포커스가 자동으로 다음 필드로 이동하고 해당 필드의 모든 텍스트를 선택하는 것입니다. 이 필드에 2 자리 숫자가 입력되면 다음 필드가 자동으로 초점을 맞 춥니 다. 나는이 onkeyup에 자바 스크립트 함수를 사용하여 일하고있다.

<input id="dobDay" style="width:30px" maxlength="2" 
     onkeyup="CheckIfFieldIsFull(event, this, 2, dobMonth)" 
     onfocus="this.select();" onmouseup="return false;" 
     > 
    /
    <input id="dobMonth" style="width:30px;" maxlength="2" 
     onkeyup="CheckIfFieldIsFull(event, this, 2, dobYear)" 
     onfocus="this.select();" onmouseup="return false;" 
     > 
    /
    <input id="dobYear" style="width:50px" maxlength="4" 
     onkeyup="CheckIfFieldIsFull(event, this, 4, IdOfNextField)" 
     onfocus="this.select();" onmouseup="return false;" 
     > 

및 자바 스크립트 :

function CheckIfFieldIsFull(e, CurrentField, MaxChars, IDOfNextField) { 
    if (e.keyCode != 9 && 
     CurrentField.value.length >= MaxChars) 
    { 
    document.getElementById(IDOfNextField.id).focus(); 
    } 
} 

이 필수 모든 작품 정상 타이핑 속도에서 HTML은 (나를 위해 날짜를 일 - 월 - 년 형식입니다)입니다. 필드에 이미 데이터가 채워져 있고 사용자가 첫 번째 필드에 2 개의 다른 문자를 빠르게 입력하면 두 번째 필드에 커서가있는 대신 커서가 세 번째 필드로 이동합니다 .-(

포커스를받을 필드가 비어 있거나 필드가 1 문자 만있을 때 발생합니다. 필드에 최대 길이 문자가 이미있을 때만 발생합니다.

저는 이것이 첫 번째 키가 사용자가 두 번째 키를 눌렀을 때까지 키 입력 이벤트가 발생합니다. 동일한 문자를 두 번째 필드에 입력하면 문제가 발생하지 않을 수 있습니다 (동일한 실제 키가있을 때 ' 이전 키 업이 발생하기 전에 키를 누르십시오.)

어떤 아이디어가이 문제의 원인입니까, 아니면 피하는 방법입니까?

사용자가 느리게 입력하도록 알려주십시오.

onkeyup() 대신 onkeypress()를 시도했지만 다른 문제가 있습니다 (주로 CurrentField.value가 방금 누른 키를 반영하여 업데이트되지 않으므로 길이가 아무런 관련이 없습니다).

도움 주셔서 감사합니다.

Answer 1

그것에 초점을하기 전에 다음 필드에 값을 다시 설정하면 그것은 우리를위한 작품이다 keydown 이벤트와 setTimeout을 사용하여 값을 정의하고 포커스 이동 :

HTML :

<input id="dobDay" style="width:30px" maxlength="2" onkeydown="CheckIfFieldIsFull(event, this, 2, dobMonth)" onfocus="this.select();" onmouseup="return false;" > / <input id="dobMonth" style="width:30px;" maxlength="2" onkeydown="CheckIfFieldIsFull(event, this, 2, dobYear)" onfocus="this.select();" onmouseup="return false;" > / <input id="dobYear" style="width:50px" maxlength="4" onfocus="this.select();" onmouseup="return false;" >

JS : 당신의 대답하지만 jsfiddle에 예를 들어

window.CheckIfFieldIsFull = function (e, CurrentField, MaxChars, IDOfNextField) { setTimeout(function() { if (e.keyCode != 9 && CurrentField.value.length >= MaxChars) { var next = document.getElementById(IDOfNextField.id); next.focus(); } }, 0); }

이

http://jsfiddle.net/f5sesoay/2/

Answer 2

시도해보십시오. http://jsfiddle.net/t1zfp8ma/

새로운 링크 http://jsfiddle.net/t1zfp8ma/6/

<input class="date" id="dobDay" style="width:30px" maxlength="2">/ 
<input class="date" id="dobMonth" style="width:30px;" maxlength="2">/ 
<input class="date" id="dobYear" style="width:50px" maxlength="4"> 

$('.date').keyup(function (e) { 
if($(this).val().length == 2 && $(this).hasClass('dirty')){ 
    $(this).removeClass('dirty'); 
    $(this).next().removeClass('dirty').select(); 
} 
}).keydown(function(e){ 
    $(this).addClass('dirty'); 
}) 

Answer 3

나는 또 다른 방법이다

var next = document.getElementById(IDOfNextField); next.value = ''; next.focus();

http://jsfiddle.net/f5sesoay/