我看到这个问题，但是没有一个解决方案支持最小值和最大值范围。
如何使用jQuery在HTML输入框中仅允许数字（0-9）？
我看到 http://jstepper.emkay.dk/ 试图做到这一点，但似乎非常有缺陷，因为它允许您输入多个小数点和其他字符，如";"。
是否有一种方法可以使用这些解决方案之一，并且还说，只支持文本框输入的最小值为0，最大值为100？
是否有一种方法可以使用这些解决方案之一，并且还说，只支持文本框输入的最小值为0，最大值为100？
8个回答
20
我是 jStepper 的作者，刚刚更新了这个插件，现在可以实现您想要的功能。
因此，请再试一次并查看它是否现在可用 :)
- EmKay
9
1太好了，谢谢！是的，我们会在脚本中为您署名，但我无法向您展示该网站，因为它将用于医院管理内部网络 - 抱歉。如果我在公共网站上找到了它的用途，我会向您展示 - 请通过adrian.emmott@gmail.com给我发邮件，这样我就可以在以后通知您。 - adrianos
问题，为什么小数点要用逗号表示？ - ctorx
根据文档所述：“默认设置为逗号（','），因为在我的国家是最常用的:oP”。请查看http://jstepper.emkay.dk/上的“decimalSeparator”文档，以了解如何更改它 :) - EmKay
复制并粘贴文本到那里，看看会发生什么！ - QMaster
Emkay，我正在尝试设置minValue:100。但是，它不允许输入超过100的值。???? $('#txtTesting').jStepper({minValue:100, maxValue:5000}); - Mr7-itsurdeveloper
显示剩余4条评论
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>
- Anurag
1
3只有使用箭头图标更改值时，才会根据最小/最大值验证该值。您仍然可以输入超出最小/最大范围的数字。 - Michael Johnston
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));
});
onblur或onchange之外，并进行检查。那样会允许无效数据输入该字段，但它要少得多令人烦恼。
编辑：此解决方案允许您输入任何内容，但标记所有无效输入，包括超出范围的输入。
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;
}
- Anurag
1
1不幸的是，如果您长时间按住某个键（keyup事件仅适用于您最后按下的数字），则仍然可以输入比“max”更高的数字。此外，当“min”为6时，您无法输入56。 - Harmen
3
Textbox 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"));
})
});
我是新手，因此欢迎任何有建设性的评论。
- StormDog
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;
}
这两个脚本都可以实时检查值，这是一个很好的方法。
- Harmen
0
JStepper有一个错误， 我在他们的网站上尝试了测试器。 http://jstepper.emkay.dk/Default.aspx
遵守规则， 但我可以输入文本：8778.09999
- Cheung
1
如果您只是使用测试页面上的规则开始，那么最大值为23。这意味着，如果您输入任何高于此值的值，它将恢复为值23。我刚刚尝试了一下，在我粘贴您的值（8778.09999）之后，它恢复到了23。这就是您看到的“错误”吗？ - EmKay
0
我进行了搜索，最终明白输入的值必须在三个事件中进行检查：keydown、keypress和keyup，它们各自有自己的职责。 keypress： 检查按下的键并决定输入的字符。如果是数字，则允许输入，否则阻止该操作。正如您所看到的，我在这里尝试检查范围。
//var final = val + String.fromCharCode(charCode);
//alert(final);
//if (final < min || final > max)
// return false;
但我们只有新的字符和值。如果我们尝试检查它们的总和，那么这是错误的方式，因为用户可能选择了值的一部分并且新字符站在那里。假设最大范围是100，我们在输入中有“345”，用户选择了“34”，现在用户按下“2”，结果必须是“25”，但“345”+“2”的总和是347，函数会阻止这种情况。所以我决定使用keyup事件来检查范围和正确的值。最后，keydown用于检查上下箭头和控制值，当浏览器支持HTML5数字类型的输入而不像keypress那样更改时，您可以不使用它。
我编写了一个简单的脚本，希望能够帮助。您可以在http://jsfiddle.net/QMaster/r4hwr3a6/中查看它。
- QMaster
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接