Force Keyup nach Keydown

Question

Ich habe 5 Eingänge, jeder von ihnen wird auf einen Brief warten. Sobald man mit einem Buchstaben gefüllt ist, muss ich automatisch zum nächsten Eingang springen.

Problem ist, dass, wenn ich nur keyup erfassen, dies mich richtig springen lässt, aber mich nicht "schnell" schreiben lässt.

z Lassen Sie uns sagen, ich habe das Wort ‚megan‘ zu schreiben, so beginne ich mit m aber wenn ich e drücken, bevor ich loslassen (keyup) die m Schlüssel, dann bekomme ich seltsame Verhalten.

Dies ist die 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> 

Die Javascript (die keydown Event Capturing)

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); 
      //}); 

    }); 

dies tun keydown mich schnell schreiben lassen, aber mich zum nächsten springen glatt nicht lassen Eingang.

Ich habe mich gefragt, ob ich eine Tastenkombination erzwingen könnte, wenn ein Keydown erkannt wird.

Answer 1

Vielleicht können Sie so etwas tun. Aber ich bin mir nicht sicher über deine Erklärung.

$('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

Warum können Sie nicht einfach auf die Taste schreiben und auf die Tastenbelegung gehen? Wenn das Keydown-Ereignis erfasst wird, erfassen Sie den Wert, während Sie das Ereignis ausführen. Bewegen Sie den Cursor dann zum nächsten Eingang, wenn das Key-Up-Ereignis ausgelöst wird.

jedoch als Antwort auf Ihre Frage Ereignisse auf dem Brennen ... Basierend auf this answer, können Sie dies tun:

// 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"); 
} 

kurzes Beispiel:

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'/>