Jquery 上键然后下一个（）

Question

我有一个表格，它被分成单独的输入框，访问者在这些输入框中输入字母，形成一个完整的单词。每个输入的最大长度属性为 1，被 keyup() 捕获，然后如果输入长度等于 1，它将使用 next() 转到下一个输入。

这个系统运行良好，但是人们抱怨说当他们快速打字时它会漏掉字母。我很想知道这是否只是无法克服的 next() 功能延迟，或者这只是我的错误编码？

这是一个 JSFiddle，这是一个可运行的堆栈代码段：

$('#psw input').keyup(function(e) {
  if ($(this).val().length > 1) {
    $(this).val($(this).val().substring(0, 1));
  }
  if ($(this).val().length == $(this).attr("maxlength")) {
    if ($(this).next('[type="text"]').length > 0) {
      $(this).next('[type="text"]')[0].focus();
    }
  }
});

$('#psw input').keydown(function(e) {
  if ((e.which == 8 || e.which == 46) && $(this).val() == '') {
    if ($(this).prev('[type="text"]').length > 0) {
      $(this).prev('[type="text"]')[0].focus();
    }
  }
});

input {
  width: 30px;
  height: 30px;
  margin: 20px;
  text-align: center;
  font-size: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="psw">
  <input type="text" maxlength="1">
  <input type="text" maxlength="1">
  <input type="text" maxlength="1">
  <input type="text" maxlength="1">
  <input type="text" maxlength="1">
  <input type="text" maxlength="1">
</div>

Answer 1

问题是快速打字的用户通常会同时按下多个键，因此当您依赖 keyup 时，您会得到不一致的结果，因为用户将按下第二个键他们发布第一个的时间。

这是您的函数的修改版本，仅使用 keydown 以及 setTimeout 以在用户按退格键时删除当前字段中的字符，然后跳转到上一个场地。这是有效的，因为 setTimeout 在浏览器执行队列中执行用户的退格键后，将字段移动命令排队。不需要密钥缓冲区或任何其他复杂的东西。

这消除了一个接一个地按下按键的所有问题。一边快速打字一边试试吧！

现场演示：

$('#psw input').keydown(function(e) {
  if ((e.which == 8 || e.which == 46)) {
    if ($(this).prev('[type="text"]').length > 0) {
      var self = this;
      setTimeout(function() {
        $(self).prev('[type="text"]')[0].focus();
      }, 0);
    }
    return;
  }

  if ($(this).val().length > 1) {
    $(this).val($(this).val().substring(0, 1));
  }
  if ($(this).val().length == $(this).attr("maxlength")) {
    if ($(this).next('[type="text"]').length > 0) {
      $(this).next('[type="text"]')[0].focus();
    }
  }
});

input {
  width: 30px;
  height: 30px;
  margin: 20px;
  text-align: center;
  font-size: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="psw">
  <input type="text" maxlength="1">
  <input type="text" maxlength="1">
  <input type="text" maxlength="1">
  <input type="text" maxlength="1">
  <input type="text" maxlength="1">
  <input type="text" maxlength="1">
</div>

JSFiddle 版本：https://jsfiddle.net/873f4Lo0/2/

Jquery 上键然后下一个（）

Jquery keyup then next()

html

javascript

jquery

keydown

keyup