Question

我一直在网页上处理日期输入。我有三个输入字段的日期。计划是当第一个字段中输入了两个字符时，焦点会自动转到下一个字段，并且该字段中的所有文本都将被选中。当在该字段中键入2位数字时，下一个字段将自动聚焦。我在onkeyup上使用javascript函数工作。 HTML是（我的日期是日 - 月 - 年格式）：

    <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;"
        >

和javascript：

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

这一切都按照正常打字速度的要求工作。如果字段已经填充了一些数据，并且用户在第一个字段中快速键入2个不同的字符，那么它将跳转到第3个字段而不是光标，它将跳转到第3个字段： - （

当要获得焦点的字段为空或仅包含1个字符时，不会发生这种情况，只有当字段中已包含maxlength个字符时才会发生。

我很确定这是因为第一个键在用户点击第二个键时没有完成键盘事件。我这样说是因为如果你尽可能快地在同一个字段中输入两个相同的字符就不会出现问题（当它是相同的物理键时，你可以在前一个键盘发生之前按键）

任何想法是什么导致了这个问题或如何避免它？

告诉用户输入更慢？！

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

感谢您的帮助。

Answer 1

试试这个。 http://jsfiddle.net/t1zfp8ma/

新链接http://jsfiddle.net/t1zfp8ma/6/

<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');
})

Answer 2

如果我在关注它之前重置下一个字段的值

，它对我们有效

var next = document.getElementById(IDOfNextField); next.value = ''; next.focus();

http://jsfiddle.net/f5sesoay/

Answer 3

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

HTML：

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

JS：

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

http://jsfiddle.net/f5sesoay/2/

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

3 个答案: