Javascript 当用户快速键入时，焦点跳过

我一直在网页上输入日期。我将日期作为三个输入字段。计划是在第一个字段中键入两个字符后，焦点自动转到下一个字段，并选择该字段中的所有文本。在该字段中键入两位数字后，下一个字段将自动聚焦。我使用onkeyup上的javascript函数实现了这一点。HTML为（日期为日-月-年格式）：

这一切都可以在正常的打字速度下正常工作。如果字段中已经填充了一些数据，并且用户在第一个字段中快速键入2个不同的字符，则光标将跳转到第三个字段，而不是在第二个字段中：-(

当要指定焦点的字段为空或只有1个字符时，不会发生这种情况，只有当字段中已经有maxlength字符时才会发生这种情况

我很确定这是因为当用户按下第二个键时，第一个键还没有发生按键事件。我这样说是因为如果您在第一个字段中尽快键入两个相同的字符，问题就不会发生（如果是同一个物理键，则无法在上一个按键发生之前进行按键操作）

你知道是什么导致了这个问题或者如何避免它吗

告诉用户打字慢一点

我尝试了onkeypress（）而不是onkeyup（），但它还有其他问题（主要是CurrentField.value不会更新以反映刚刚按下的键，因此长度不会给出任何相关信息）

谢谢您的帮助。

试试这个

新链接

/
/
$（'.date'）.keyup（函数（e）{
if（$（this.val（）.length==2&&$（this.hasClass（'dirty'））{
$（this.removeClass（'dirty'）；
$（this）.next（）.removeClass（'dirty'）.select（）；
}
}).keydown（功能（e）{
$（this.addClass（'dirty'）；
})

如果我在关注下一个字段之前重置该字段的值，则对我们有效

var next=document.getElementById（idofNext字段）；
next.value=''；
next.focus（）；

---

另一种方法是使用keydown事件和setTimeout来定义值和移动焦点：

HTML:

/
/

JS:

window.checkifieldisfull=函数（e，CurrentField，MaxChars，IDOfNextField）{
setTimeout（函数（）{
如果（e.keyCode！=9&&CurrentField.value.length>=MaxChars）{
var next=document.getElementById（IDOfNextField.id）；
next.focus（）；
}
}, 0);
}

---

是，清除字段会停止跳过（正如我在文章中所说的，只有在字段中填充了值时才会发生）但是我需要向用户显示该值，这样他们就可以在该字段的值不被更改的情况下对其进行制表。对不起，我没有提到。我会尝试另一种方式。谢谢您的回答，但JSFIDLE上的示例显示了问题行为。在jsfiddle示例中，如果您在字段ie 10 11和2013中键入一些值，请单击在第一个字段中，然后快速键入两个数字（例如1和2，因为键盘上的数字相邻，因此很容易快速键入）您将看到光标已跳到第三个字段而不是第二个字段。如果您单击第一个字段，然后键入1，请暂停一秒钟，然后键入2，光标将转到第二个字段（如预期的那样）。感谢您的帮助。在您的JSFIDLE示例中，您使用的是keypress。keypress有问题-例如，在字段中键入2个数字-光标不会移动到下一个字段。直到您按下第3个字符，光标才会移动。此外，当字段中充满字符时，即使选择了内容，您也会单击字段，并且看起来s就像您可以在中键入一个新值一样，只要键入1个字符，光标就被带到下一个字段。onkeypress事件在字段值更改之前触发，因此长度==2测试返回一种假阳性。这在JSFIDLE中似乎非常有效。我将尽快在我的页面上尝试。谢谢Rodion我在我的页面上尝试了它我的问题解决了，用户很高兴！再次感谢。

    <input id="dobDay" style="width:30px" maxlength="2"
        onkeyup="CheckIfFieldIsFull(event, this, 2, dobMonth)"
        onfocus="this.select();" onmouseup="return false;"
        >
    /
    <input id="dobMonth" style="width:30px;" maxlength="2"
        onkeyup="CheckIfFieldIsFull(event, this, 2, dobYear)"
        onfocus="this.select();" onmouseup="return false;"
        >
    /
    <input id="dobYear" style="width:50px" maxlength="4" 
        onkeyup="CheckIfFieldIsFull(event, this, 4, IdOfNextField)"
        onfocus="this.select();" onmouseup="return false;"
        >

function CheckIfFieldIsFull(e, CurrentField, MaxChars, IDOfNextField) {
  if (e.keyCode != 9 && 
      CurrentField.value.length >= MaxChars)
  {
    document.getElementById(IDOfNextField.id).focus();
  }
}

<input class="date" id="dobDay" style="width:30px" maxlength="2">/
<input class="date" id="dobMonth" style="width:30px;" maxlength="2">/
<input class="date" id="dobYear" style="width:50px" maxlength="4">

$('.date').keyup(function (e) {
if($(this).val().length == 2 && $(this).hasClass('dirty')){
    $(this).removeClass('dirty');
    $(this).next().removeClass('dirty').select();
}
}).keydown(function(e){
    $(this).addClass('dirty');
})