Forcer le clavier après le clavier

Question

J'ai 5 entrées, chacun attendra une lettre. Une fois qu'une lettre est remplie, je dois passer automatiquement à l'entrée suivante.

Le problème est que, si je capture seulement keyup cela me fait sauter correctement, mais ne me laisse pas écrire "rapidement".

Disons que par exemple je dois écrire le mot « megan », donc je commence avec m mais si je presse e avant RELEASE (keyup) la clé m, puis-je obtenir un comportement bizarre.

C'est le 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> 

Le javascript (capture de l'événement 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); 
      //}); 

    }); 

Faire cela en keydown me permettent d'écrire rapidement, mais ne me laisse pas sauter en douceur à l'autre contribution.

Je me demandais si je pouvais forcer n'importe quel keyup quand un keydown est détecté.

Answer 1

Peut être que vous pouvez faire quelque chose comme ceci. Mais je ne suis pas sûr de votre explication.

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

Pourquoi ne pas simplement écrire sur la clé vers le bas et se déplacer sur le keyup? c'est-à-dire que lorsque l'événement keydown est capturé, collectez la valeur comme vous le faites, puis, lorsque l'événement key up est déclenché, déplacez le curseur sur l'entrée suivante.

Cependant, en réponse à votre question sur les événements de tir ... Basé sur this answer, vous pouvez le faire:

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

exemple rapide:

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