Fiddle Demo

的Javascript

function CheckLength(val, key) {
      var keycode = (key.which) ? key.which : key.keyCode;
      if(!(keycode == 8 || keycode == 46) && (keycode < 48 || keycode > 57))
         return false;
      if (val.length < 4)
         console.log(val);
      else
         return false;
}

HTML标记

 <input type="text" id="timepick" onkeyup="return CheckLength(this.value,event);"  />

任何人都可以帮助我吗？为什么会这样？

感谢您宝贵的时间。

Answer 1

你可以听一个“keydown”事件而不是“keyup”继承你的Fiddle，（我只更改为）。，或通过重置“keyup”事件中的值来删除最后输入的密钥。

document.getElementById("timepick").addEventListener("keyup", function (e) {
    var keycode = (e.which) ? e.which : e.keyCode;
    if (e.target.value.length <= 4) console.log(e.target.value)
    if (!(keycode == 8 || keycode == 46) && (keycode < 48 || keycode > 57) || e.target.value.length > 3) 
        e.target.value = e.target.value.substr ( 0,4)
});

就像这个Fiddle

一样

或者您可以使用2个单独的事件，一个“keydown”来阻止输入，以及一个读取值的键盘

document.getElementById("timepick").addEventListener("keydown", function (e) {
    var keycode = (e.which) ? e.which : e.keyCode;
    if (!(keycode == 8 || keycode == 46) && ((keycode < 48 || keycode > 57) || e.target.value.length > 3) e.preventDefault()

});
document.getElementById("timepick").addEventListener("keyup", function (e) {
    if (e.target.value.length == 4) console.log(e.target.value)
});

就像这个Fiddle

一样

更新，关于您的评论当然，您可以只使用“keydown”事件，并自行构建您想要的值。

document.getElementById("timepick").addEventListener("keydown", function (e) {
    var keycode = (e.which) ? e.which : e.keyCode;
    if (!(keycode == 8 || keycode == 46) && ((keycode < 48 || keycode > 57) || e.target.value.length > 3)) e.preventDefault()
    if (e.target.value.length == 3) console.log(e.target.value + String.fromCharCode(keycode))

});

就像这个Fiddle

一样

Answer 2

希望这会对你有所帮助。它可以防止超过4个值并显示4进入日志（在小提琴中我通过警报更改console.log）。

我通过将4个值存储到变量中来解决它，如果用户输入的值超过4个，则使用变量值恢复文本框值：

http://fiddle.jshell.net/6czXu/7/

var vals; 

function CheckLength(val, key) {
   var keycode = (key.which) ? key.which : key.keyCode;

   if (val.length < 5){
     alert(val);
     // Here store the 4 values
     vals = val;
     if((keycode == 8 || keycode == 46) && (keycode < 48 || keycode > 57))
       return false;
     }
     else{
        // Here we have more than 4 digits entered so
        // we restore the prevously stored into vals
        document.getElementById("timepick").value = vals;
        return false;
     }
 }

Answer 3

使用onkeypress事件，一切都应该正常。 onkeyup迟到了。

<input type="text" id="timepick" onkeypress="return CheckLength(this.value,event);"  />

为什么我的病情不满意？

Fiddle Demo

3 个答案: