[英]Why my condition is not satisfied?
I have a textbox and i want to allow users only enter 4 digits as i want to take time from the user, but i am facing the strange problem in condition. 我有一个文本框,我想允许用户只输入4位数,因为我想从用户那里花时间,但我面临着条件的奇怪问题。
Javascript 使用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 Markup HTML标记
<input type="text" id="timepick" onkeyup="return CheckLength(this.value,event);" />
Can anyone help me? 谁能帮我? why this is happening?
为什么会这样?
Thanks for your precious time. 谢谢你宝贵的时间。
You could listen for a "keydown" event instead of "keyup" Heres your Fiddle , (i only changed up to down ). 你可以听一个“keydown”事件,而不是“keyup” 继承你的小提琴 ,(我只改为向下 )。 , or remove the last entered key by resetting the value in the "keyup" event.
,或通过重置“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)
});
Or you could use 2 seperate events, one "keydown" to prevent the input, and a keyup to read the value 或者您可以使用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)
});
Update, regarding your comment You could, of course use only a "keydown" event, and build the value you want on your own. 更新,关于你的评论你当然可以只使用“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))
});
Hope this helps you. 希望这对你有所帮助。 It prevents more than 4 values and shows the 4 entered into the log (in the fiddle I change the console.log by an alert).
它可以防止超过4个值并显示4进入日志(在小提琴中我通过警报更改console.log)。
I solved it by storing the 4 values into a variable and if the user enters more than 4 values restore the textbox value with the variable value: 我通过将4个值存储到变量中来解决它,如果用户输入的值超过4,则使用变量值恢复文本框值:
http://fiddle.jshell.net/6czXu/7/ 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;
}
}
Use the onkeypress
event instead and everything should work fine. 请使用
onkeypress
事件,一切都应该正常。 onkeyup
is to late. onkeyup
是迟到的。
<input type="text" id="timepick" onkeypress="return CheckLength(this.value,event);" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.