具有最小和最大范围的jquery数字文本框
我看到了这个问题，但没有一个解决方案支持最小值和最大值范围
如何使用jQuery仅允许HTML输入框中的数字（0-9）？
我看到http://jstepper.emkay.dk/尝试这样做，但似乎非常错误，因为它允许您输入多个小数位和其他字符，如“;”。
我可以使用这些解决方案之一，并且还说，在文本框条目中仅支持最小0和最大100？
我是jStepper的作者，我刚刚更新了插件，以便能够做你喜欢的事情。
所以再试一次，看看它现在是否有效:)
HTML5添加此类字段的方式。 适用于Chrome和Safari：
一个完整的例子：
创建仅接受范围的自定义文本框类型。 像这样的东西应该工作：
function RangeTextBox(min, max) { this.min = min; this.max = max; this.textBox = $(""); // 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)创建一个新的TextBox。 例如
$(document).ready(function() { $("body").append(new RangeTextBox(1, 18)); });
免责声明 ：这个问题与Harmen列出的问题相同，如果最小值为6为2 <6，则字段的另一个答案中不接受2的数字“26”。您可以使用计时器，或实际移动此在keyup和keydown事件之外检查，并检查onblur或onchange 。 这将允许无效数据进入该领域，但它的声明要少得多。
编辑：此解决方案允许您输入任何内容，但标记所有无效输入，包括超出范围。
function RangeTextBox(min, max) { this.min = min; this.max = max; this.textBox = $(""); // 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; }
和样式表：
Textbox MIN MAX – jQuery函数
这是一种方法，例如，“使用jQuery仅支持0和最多100个文本框条目”。 它的工作原理是将您的条目返回到之前的状态 – 如果输入的密钥导致值小于MIN或大于MAX。 您可以设置一个标志只接受整数。
HTML标记看起来像这样：（ JSFIDDLE ）
然后，您将在文档就绪代码中运行此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")); }) });
我是新手，所以任何建设性的评论都会受到赞赏。
以下是脚本的外观示例：
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; }
两个脚本都在动态检查值，这是一个很好的方法。
我创建了一个支持min，max和step的jQuery SpinControl 。 它首先检查浏览器（Opera）是否已经支持SpinControl，然后再添加自定义SpinControl。
JStepper有一个bug，我在他们的网站上试用了测试人员。 http://jstepper.emkay.dk/Default.aspx
苹果规则，但我可以输入文字：8778.09999
我搜索了，最后我理解输入的值必须在三个事件中检查。 keydown，keypress和keyup以及他们中的任何一个都有自己的责任。 按键：检查按下的键并确定输入的字符。 然后如果它是数字，则让它阻止该动作。 如你所见，我试图在这里检查范围
//var final = val + String.fromCharCode(charCode); //alert(final); //if (final < min || final > max) // return false;
但在此之前我们只有新的角色和价值。 所以如果我们试图检查它们的总和是错误的方式，因为可能用户选择了值的一部分而新的角色站立了。 假设最大范围是100并且我们在输入中有“345”并且用户选择“34”现在用户按“2”并且结果必须是“25”，但是“345”+“2”的总和是347并且function防止。 所以我决定使用keyup事件来检查范围和正确的值。 最后keydown用于检查上下箭头和控制值，当浏览器支持HTML5数字类型的输入而不改变像按键那样你就不能使用它。
我写了一个简单的脚本，希望有所帮助。 你可以在http://jsfiddle.net/QMaster/r4hwr3a6/看到它