keydown 이후 강제 키 입력

Question

5 개의 입력이 있는데 모두가 편지를 기다립니다. 편지가 가득 차면 자동으로 다음 입력으로 이동해야합니다.

문제는 내가 keyup 만 캡처하면 올바르게 점프하게되지만 "빨리"쓸 수 없다는 것입니다.

예컨대의 나는 단어 '메간'를 작성해야한다고 가정 해 봅시다, 그래서 나는 m로 시작하지만 e을 누르면 내가 해제하기 전에 (의 keyup)를 m 키를 누른 다음 내가 이상한 행동을 얻는다.

이

는 HTML

<form> 
     <div class="code-cell"><input id="code-1" tabindex="1" class="code-input" type="text" data-isvalid="false" /></div> 
     <div class="code-cell"><input id="code-2" tabindex="2" class="code-input" type="text" maxlength="1" data-isvalid="false" /></div> 
     <div class="code-cell"><input id="code-3" tabindex="3" class="code-input" type="text" maxlength="1" data-isvalid="false" /></div> 
     <div class="code-cell"><input id="code-4" tabindex="4" class="code-input" type="text" maxlength="1" data-isvalid="false" /></div> 
     <div class="code-cell"><input id="code-5" tabindex="5" class="code-input" type="text" maxlength="1" data-isvalid="false" /></div> 
    </form> 

keydown에 이렇게

var goTo = function (curIndex, nextIndex, e) { 

     // Backwards 
     if ((curIndex > codeMinLength) && (nextIndex < curIndex)) { 
      if (nextIndex < 5 && $('#code-' + curIndex).val() === '') { 
       $('#code-' + nextIndex).focus(); 
      } 
      $('#code-' + curIndex).val(''); 
     } 

     // Foreward 
     if ((curIndex < codeMaxLength) && (nextIndex > curIndex)) { 
      if ($('#code-' + curIndex).val().trim().length > 0) { 
       // Force the keyup of the previous pressed key not yet released 
       $('#code-' + nextIndex).focus(); 
      } 
     } 

    }; 

    var eventToCapture = (window._PFN.isMobile) ? 'keyup' : 'keydown'; 
    $('.code-input').on(eventToCapture, function (e) { 

     var $input = $(e.target); 
     var keyCode = e.keyCode || e.which; 

      curIndex = parseInt($input.attr('tabindex')); 
      nextIndex = null; 

      if(e.keyCode === 13) { 
       return validateCode(); 
      } 

      if (keyCode === 8) { // Backspace 
       nextIndex = curIndex - 1; 
      } else { 
       nextIndex = curIndex + 1; 
      } 

      //$('.code-input').on('keyup', function(e){ 
      goTo(curIndex, nextIndex, e); 
      //}); 

    }); 

날 빨리 쓸 수합니다 (keydown 이벤트를 캡처) 자바 스크립트,하지만 내가 다음에 원활하게 이동하지 않습니다 입력.

keydown이 감지 될 때 강제로 키 입력을 할 수 있는지 궁금합니다.

Answer 1

다음과 같이 할 수 있습니다. 하지만 당신의 설명이 확실하지 않습니다.

$('body').keydown(function (e) { 
    if(e.keyCode==40) { // use your key code instead of Enter Key code 
     //do something 
    } 
    return false; 
}) 
.keyup(function(e) { 
    if(e.keyCode==40) { // use your key code instead of Enter Key code 
     //do something else 
    } 
    return false; 
}); 


$('body').on('keyup', function (e) { 
    if(e.keyCode==40) { // use your key code instead of Enter Key code 
     //do something 
    } 
    // after first keyup set to handle next keydown only once: 
    $(this).one('keydown', function(e) { 
     if(e.keyCode==40) { // use your key code instead of Enter Key code 
      //do something else 
     } 
    }); 
}); 

Answer 2

키를 쓰고 키 입력으로 이동할 수없는 이유는 무엇입니까? 즉, keydown 이벤트가 캡처되면 수행중인 값을 수집 한 다음 키 업 이벤트가 발생하면 커서를 다음 입력으로 이동하십시오. 이벤트를 발사에 대한 질문에 응답 그러나

이 ... this answer을 바탕으로, 당신이 할 수 있습니다 :

는

// Do whatever here to captrure your keydown then 
if ("createEvent" in document) { 
    var el = document.getElementById('textBox'); 
    var e = document.createEvent('HTMLEvents'); 
    e.initEvent('keyup', false, true); 
    el.dispatchEvent(e); 
} 
else{ 
    element.fireEvent("onkeyup"); 
} 

빠른 예 :

var el = document.getElementById('textBox'); 
 
el.onkeyup=function(){ 
 
    console.log('KeyUp Caught'); 
 
}; 
 
el.onkeydown=function(){ 
 
    console.log('KeyDown Caught'); 
 
    if ("createEvent" in document) { 
 
     var e = document.createEvent('HTMLEvents'); 
 
     e.initEvent('keyup', false, true); 
 
     el.dispatchEvent(e); 
 
    } else { 
 
     element.fireEvent("onkeyup"); 
 
    } 
 
};

<input id="textBox" type='text'/>