我有一个文本框,我想允许用户只输入 4 位数字,因为我想从用户那里占用时间,但我遇到了一个奇怪的问题。
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);" />
谁能帮帮我?为什么会这样?
感谢您的宝贵时间。
最佳答案
您可以监听“keydown”事件而不是“keyup”这是您的Fiddle ,(我只把 up 改成了 down)。 ,或通过重置“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”来阻止输入,一个 keyup 来读取值
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
关于javascript - 为什么我的条件不满足?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17567155/