Question

我为时间输入制作了3个输入框（hh，mm，ss）当用户输入2位数字时，它将自动聚焦下一个（mm）字段。同样适用于mm和ss。

我正在使用＆＃39; keyup＆＃39;用于绑定输入框的事件。然而这种行为很奇怪：

如果我慢慢输入2位数字，它就可以了。如果我输入FASTER，它会跳两次。

我怀疑焦点是＆＃39;事件触发了keyup事件，我不知道如何处理它。我曾尝试过.preventDefault对焦点事件。但没有运气。

以下是代码：

$('#hh').on('keyup', function (e) {
    var hh = $('#hh').val().toString();
    if (hh.length >= 2) {
        $('#mm').focus();
    }
});

$('#mm').on('keyup', function (e) {
    var mm = $('#mm').val().toString();
    if (mm.length >= 2) {
        $('#ss').focus();
    }
});

这是一个演示：

jsfiddle（http://jsfiddle.net/ch3ksuwa）

要重现：在hh字段中快速输入2位数字，它将跳转到ss而不是mm

我试过Chrome和Firefox，同样的问题

Answer 1

看起来$('#hh').val()在第二次按键后发生，但我不确定为什么第二个'keyup'事件的目标是#mm。

您可以尝试使用'input'事件而不是'keyup'事件。当输入的值发生变化时，将触发此事件。为此目的更具语义性，并避免在错误的时间触发键盘事件的任何问题。

$('#hh').on('input', function (e) {
  var hh = $('#hh').val().toString();
  if (hh.length >= 2) {
    $('#mm').focus();
  }
});

$('#mm').on('input', function (e) {
  var mm = $('#mm').val().toString();
  if (mm.length >= 2) {
    $('#ss').focus();
  }
});

我还没有检查过哪些浏览器支持这个。它正在为我开发Chrome。

Answer 2

这很直接。如果你输入快速，事件会触发两次，因为你设置＆＃34;值＆＃34;到2位数字。通过这样做来测试：键入＆＃39; 23＆＃39;，同时按住两个键。然后释放2，它将跳转到第二个输入，然后释放3，它将跳到最后一个。

因此，一旦您在第一个输入中键入两个数字并释放一个键，该事件将被触发一次，而在第二个键盘上，将立即触发下一个事件键，因为第二个输入的值已经是2数字长。

如果用占位符替换它，那么它可以工作。看看这个：

<input type="text" id="ss" class="chained" placeholder="30">

http://jsfiddle.net/ch3ksuwa/4/

编辑：我发布的第一个解决方案以某种方式解决了这个问题，第二次有人想要更改某个值时，会发生同样的错误。

所以我添加了一个名为＆＃34; comeFromFirst＆＃34;的变量。一旦keyup事件触发第二个输入上的.focus，它最初为false并且将为true。然后，第一次在第二个输入中触发键盘事件时，它会将值设置为false。现在你也可以使用＆＃34; value＆＃34;而不是占位符（占位符在大多数情况下更好，tho）。在这里查看：

http://jsfiddle.net/ch3ksuwa/5/

焦点会触发键盘事件吗？

2 个答案: