javascript - 焦点是否触发 keyup 事件？

Question

我做了3个时间输入框(hh,mm,ss)当用户在 hh 中输入 2 位数字时，它会自动聚焦下一个 (mm) 字段。 mm 和 ss 相同。

我正在使用“keyup”事件来绑定(bind)我的输入框。但是行为很奇怪:

如果我慢慢地输入 2 位数字，它就会起作用。如果我输入 FASTER，它会跳两次。

我怀疑 'focus' 事件触发了 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。