我看到了这个问题，但没有一个解决方案支持最小值和最大值范围
如何使用 jQuery 在 HTML 输入框中只允许数字（0-9）？
我看到http://jstepper.emkay.dk/试图这样做，但似乎非常错误，因为它允许您输入多个小数位和其他字符，例如“;”。
有没有我可以使用其中一种解决方案的方法，并且还说，在文本框条目中仅支持 0 的最小值和 100 的最大值？
问问题
46778 次
8 回答
20
我是jStepper的作者，我刚刚更新了插件以便能够做你喜欢的事情。
所以再试一次，看看它现在是否有效:)
于 2010-01-07T15:03:24.637 回答
7
添加此类字段的 HTML5 方式。适用于 Chrome 和 Safari：
<input type="range" min="0" max="100" step="1" />
一个完整的例子：
<input id="picker" type="range" min="0" max="100" step="1" onchange="$('#pickerValue').text(this.value)" />
<div id="pickerValue"></div>
于 2010-01-07T11:07:25.240 回答
3
创建只接受范围的自定义类型的文本框。像这样的东西应该工作：
function RangeTextBox(min, max) {
this.min = min;
this.max = max;
this.textBox = $("<input type='text'>");
// Disallow non-numbers from being typed in box
this.textBox.keydown(function(event) {
var isNotBackspaceOrDelete = event.keyCode != 46 && event.keyCode != 8;
var isNotInteger = event.keyCode < 48 || event.keyCode > 57;
if(isNotBackspaceOrDelete && isNotInteger) {
event.preventDefault();
}
});
// Check for a valid range
this.textBox.keyup(function(event) {
var textBox = event.target;
var isNotInRange = (textBox.value < min) || (textBox.value > max);
if (isNotInRange) {
textBox.value = textBox.value.slice(0, -1);
}
});
return this.textBox;
}
要使用它，只需调用new RangeTextBox(min, max). 例如
$(document).ready(function() {
$("body").append(new RangeTextBox(1, 18));
});
免责声明：如果最小值为 6 为 2 < 6，则这与 Harmen 在字段的另一个答案中列出的相同问题不接受数字“26”的值如 2。您可以使用计时器，或者实际移动这个检查keyupandkeydown事件之外，并检查onbluroronchange代替。这将允许无效数据进入该字段，但它不那么烦人。
编辑：此解决方案可让您输入任何内容，但会标记所有无效输入，包括超出范围。
function RangeTextBox(min, max) {
this.min = min;
this.max = max;
this.textBox = $("<input type='text'>");
// Check for a valid range
this.textBox.keyup(function(event) {
var textBox = event.target;
var value = parseInt(textBox.value);
var isNotNumeric = !/^[0-9]+$/.test(textBox.value);
var isOutsideRange = (value < min) || (value > max);
if (isNotNumeric || isOutsideRange) {
$(textBox).addClass('error');
}
else {
$(textBox).removeClass('error');
}
});
return this.textBox;
}
和样式表：
<style type="text/css">
.error {
color: red;
}
于 2010-01-06T14:35:48.573 回答
3
文本框 MIN MAX - jQuery 函数
例如，这是一种使用 jQuery 的方法，“仅支持文本框条目中的最小值为 0 和最大值为 100”。它的工作原理是将您的输入恢复到以前的状态 - 如果您输入的键导致值小于 MIN 或大于 MAX。您可以设置一个标志以仅接受整数。
HTML 标记如下所示： ( JSFIDDLE )
<input type="text" class="maxmin" min="0" max="100" intOnly="true" />
然后，您将在文档就绪代码中运行此 JavaScript：
// Run this on document ready to allow only numbers between
// max and min to be entered into textboxes with class="maxmin".
// Attributes max, min, and intOnly="true/false" are set in the tag.
// Min should probably be "0" or "1", or max and min could be single digits.
// Otherwise for example, if min=5, you couldn't enter 23 because 2 < 5.
$(".maxmin").each(function () {
var thisJ = $(this);
var max = thisJ.attr("max") * 1;
var min = thisJ.attr("min") * 1;
var intOnly = String(thisJ.attr("intOnly")).toLowerCase() == "true";
var test = function (str) {
return str == "" || /* (!intOnly && str == ".") || */
($.isNumeric(str) && str * 1 <= max && str * 1 >= min &&
(!intOnly || str.indexOf(".") == -1) && str.match(/^0\d/) == null);
// commented out code would allow entries like ".7"
};
thisJ.keydown(function () {
var str = thisJ.val();
if (test(str)) thisJ.data("dwnval", str);
});
thisJ.keyup(function () {
var str = thisJ.val();
if (!test(str)) thisJ.val(thisJ.data("dwnval"));
})
});
我是新手，所以任何建设性的意见将不胜感激。
于 2014-10-18T21:30:49.717 回答
1
以下是您的脚本的示例：
var value, min=6, max=100;
function isNumberPressed(k) {
// 48-57 are number 0-9 on a normal keyboard, 96-105 are keypad numbers
return (k > 47 && k < 58) || (k > 95 && k < 106) ? true : false;
}
function isValidNumber(v){
// Check if a valid number is entered
return (parseInt(v, 10) >= min && parseInt(v, 10) <= max) ? true : false;
}
$(document).ready(function() {
$("#test").keydown(function(e) {
// See if a valid key is pressed
if(isNumberPressed(e.keyCode)){
if(isValidNumber($(this).val())) value = $(this).val();
}
// Do nothing if unallowed keys are pressed
else if(e.keyCode != 46 && e.keyCode != 8) return false;
}).keyup(function(){
// If the value, including the latest number that's added, is not valid (to high or to low), show the old value again
if(isValidNumber($(this).val()) == false){
$(this).val(value);
}
});
});
但它有一个很大的缺点，如果最小值为 6，则不能输入 26，因为 2 < 6。如果最小值小于或等于 10，则这不是问题。
但是，如果您的最小值超过 10，则可以考虑以下代码：
var timer, min=36, max=100;
function isValidNumber(v){
// Check if a valid number is entered
return (parseInt(v, 10) >= min && parseInt(v, 10) <= max) ? true : false;
}
$(document).ready(function() {
$("#test").keydown(function(e) {
that = this;
// Clear the timer
if(timer)
clearTimeout(timer);
// Set a new timer with a delay of one second
timer = setTimeout(function(){
if(isValidNumber($(that).val()) == false) $(that).addClass('error');
else $(that).removeClass('error');
}, 1000);
});
});
它以一秒的延迟检查输入。为此，您需要一些 CSS 代码，例如：
input.error {
border: 2px solid red;
}
两个脚本都即时检查值，这是一个很好的方法。
于 2010-01-06T14:31:49.863 回答
1
我创建了一个支持 min、max 和 step的 jQuery SpinControl 。它首先检查浏览器 (Opera) 是否已经支持 SpinControl，然后再添加自定义的。
于 2010-01-06T14:55:02.043 回答
0
JStepper 有一个错误，我在他们的站点上尝试了测试器。 http://jstepper.emkay.dk/Default.aspx
苹果规则，但我可以输入文本：8778.09999
于 2011-04-06T02:32:55.637 回答
0
我搜索，最后我明白输入的值必须在三个事件中检查。keydown、keypress 和 keyup，它们中的任何一个都有自己的责任。keypress：检查按下的键并确定输入的字符。然后，如果它是数字，则让它阻止该操作。如您所见，我尝试在这里检查范围
//var final = val + String.fromCharCode(charCode);
//alert(final);
//if (final < min || final > max)
// return false;
但在此之前我们只是有新的性格和价值。因此，如果我们尝试检查它们的总和，那是错误的方式，因为也许用户选择了值的一部分，而新角色则相反。假设最大范围是 100，我们在 Input 中有“345”，用户选择了“34”，现在用户按“2”，结果必须是“25”，但是“345”+“2”的总和是 347，并且功能阻止了这种情况. 所以我决定使用 keyup 事件来检查范围和正确的值。最后，当浏览器支持 HTML5 数字类型的输入时，keydown 用于检查向上和向下箭头和控制值，而不会像按键一样改变，所以你不能使用它。
我写了一个简单的脚本，希望有所帮助。您可以在http://jsfiddle.net/QMaster/r4hwr3a6/中看到它
于 2014-09-07T13:27:59.017 回答