我希望允许用户在输入框中输入1到999之间的值。
我尝试了以下方法
<input name="quantity" class="numbers" value=""/>
$('.numbers').keypress(function (e) {
var value = parseInt($(this).val());
if (value <= 0 || value > 999) {
return false;
}
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
return false;
}
});这不起作用,当我输入零值时,我被卡住了,这里是https://jsfiddle.net/kcet86s8/4/小提琴的链接。
我哪里出问题了?
发布于 2016-06-14 02:12:33
为了清楚起见,你应该在你的问题上加上这个。
不允许用户输入除1到999以外的任何值,包括小数。
您的问题是:您希望限制用户输入,这取决于输入的值。但是"keypress“事件是在更新值之前触发的,因此您得到的值是旧值,而不是新值(这很容易检查)
您的需求中的问题是,在更新输入之前无法获得新值,至少jquery不能这样做。因此,您不能限制用户输入在“按键”。
以另一种方式,你可以使用“键”。如果用户输入了错误的值,则恢复最后的值。.i.e:https://jsfiddle.net/kcet86s8/7/
$(document).ready(function () {
$.myval = $('.numbers').val();
$('.numbers').keyup(function (e) {
var value = parseInt($(this).val());
if (value <= 0 || value > 999) {
$(this).val($.myval);
return false;
}
if ((e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57))) {
$(this).val($.myval);
return false;
}
$.myval = $(this).val();
});
});用户在恢复输入值之前仍然可以看到它。我认为这并不完美,但这是唯一的办法。
更新键代码条件以启用numpad输入,如@Midas建议的那样:https://jsfiddle.net/kcet86s8/10/
$(document).ready(function () {
$.myval = $('.numbers').val();
$('.numbers').keyup(function (e) {
var value = parseInt($(this).val());
if (value <= 0 || value > 999) {
$(this).val($.myval);
return false;
}
if (e.which != 8 && e.which != 0 && !(e.which >= 48 && e.which <= 57) && !(e.which >= 96 && e.which <= 105)) {
$(this).val($.myval);
return false;
}
$.myval = $(this).val();
});
});发布于 2016-06-14 00:52:26
您可以使用<input type="number">元素、带有参数0, -1的input事件String.prototype.slice()删除input值的最后一个字符,如果在第一个if条件下使用valueAsNumber属性代替parseInt()
$(document).ready(function() {
$(".numbers").on("input", function(e) {
var value = this.valueAsNumber;
if (value <= 0 || value > 999) {
this.value = this.value.slice(0, -1);
}
// if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
// return false;
// }
});
});<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<input name="quantity" type="number" class="numbers" value="" />
jsfiddle https://jsfiddle.net/kcet86s8/5/
发布于 2016-06-14 00:27:17
您可以使用<input type="number">,它具有min和max属性:
<input type="number" min="1" max="999" value="1">
浏览器支持
https://stackoverflow.com/questions/37801127
复制相似问题