javascript - keyup ve keydown olayları, eğer kullanıcı çok hızlı yazıyorsa

Bu problemi nasıl çözeceğimi bilmiyorum:

Kullanıcı, giriş alanlarına bazı sayısal değerler yazmaya başlayabilir. Bir sayı yazdıktan sonra imleç bir sonraki giriş alanına geçecektir. Ancak kullanıcı çok hızlı yazıyorsa, yani iki sayı arasında bir tuş bırakma (keyup) olmazsa, bu çalışmaz.

Yani kullanıcı "1" ve "2" yerine "12" yazıyorsa, ilk giriş alanında "1" değeri, ikinci giriş alanında "2" değeri olmalı ve odak üçüncü giriş alanına ayarlanmalıdır.

<form>
    <input type="password" maxlength="1" name="pin1" autofocus />
    <input type="password" maxlength="1" name="pin2" />
    <input type="password" maxlength="1" name="pin3" />
    <input type="password" maxlength="1" name="pin4" />
</form>

$('form input').on('keydown', function(event) {        
    if (event.shiftKey || event.which <= 47 || event.which >= 58)
        return false;

}).on('keyup', function (event) {
    if (event.currentTarget.value.length >= 1)
        $(event.currentTarget).next('input').focus();
});

http://jsfiddle.net/bbeg17r8/

Cevap #1

input olayıyla her iki koşulu birleştirerek denediniz mi ve bu, tuş olayları, kes/yapıştır olayları gibi birden çok kullanıcı eylemi için çalışacaktır:

$('form input').on('input keypress', function(event) {     
    if (event.type == "keypress" && (event.shiftKey || event.which <= 47 || event.which >= 58))
        return false;


    if (event.currentTarget.value.length >= 1)
        $(event.currentTarget).next('input').focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type="password" maxlength="1" name="pin1" autofocus />
    <input type="password" maxlength="1" name="pin2" />
    <input type="password" maxlength="1" name="pin3" />
    <input type="password" maxlength="1" name="pin4" />
</form>

Cevap #2

Bunu iyi yönetmek için oldukça daha sofistike olmanız gerekecek, özellikle kullanıcı PIN'ini girmek için yapıştırma kullanırsa (kullanılmaması gerekir, ama kullanacaklar).

maxlength özelliğini kaldırır ve metni giriş sırasında alanlara dağıtırdım. Asıl metin tuş vuruşlarıyla ilgilenmek için en iyi olay keypresstir ve tabii ki sonra change ve input olaylarını da isteyeceğiz.

İşte kaba ve hazır bir versiyon:

$('input').on('keypress input change', function(event) {
    setTimeout(handleInputs, 0);
});
function handleInputs() {
  var focussed = false;
  var inputs = $("input").get();

  // Collect the values
  var text = inputs.reduce(
    function(acc, input) {
      return acc + input.value;
    },
    ""
  );

  // ...adjust `text` here if you want...

  // Distribute the values
  inputs.forEach(function(input, index) {
    input.value = text.charAt(index);
    if (!focussed && !input.value) {
      console.log("Focussing " + this.name);
      input.focus();
      focussed = true;
    }
  });
}

Canlı Örnek:

$('input').on('keypress input change', function(event) {
	setTimeout(handleInputs, 0);
});
function handleInputs() {
  var focussed = false;
	var inputs = $("input").get();
	var text = inputs.reduce(
    function(acc, input) {
      return acc + input.value;
    },
    ""
  );
  inputs.forEach(function(input, index) {
    input.value = text.charAt(index);
    if (!focussed && !input.value) {
    console.log("Focussing " + this.name);
    	input.focus();
      focussed = true;
    }
  });
}

<form>
  <input type="password" name="pin1" autofocus />
  <input type="password" name="pin2" />
  <input type="password" name="pin3" />
  <input type="password" name="pin4" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>