具有最小和最大范围的 jquery 数字文本框

Question

我看到这个问题，但没有一个解决方案支持最小值和最大值范围

如何使用 jQuery 在 HTML 输入框中仅允许数字（0-9）？

我看到 http://jstepper.emkay.dk/ 尝试这样做，但似乎非常有问题，因为它允许您输入多个小数位和其他字符，例如“;”。

有没有一种方法可以使用这些解决方案之一，并且只支持文本框条目中的最小值 0 和最大值 100？

Answer 1

我是 jStepper 的作者，我刚刚更新了该插件，以便能够做您喜欢的事情。

所以再试一次，看看现在是否有效:)

Answer 2

添加此类字段的 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>

Answer 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) 创建一个新的 TextBox 即可。例如

$(document).ready(function() {
    $("body").append(new RangeTextBox(1, 18));
});

免责声明：这与 Harmen 在字段的其他答案中列出的问题相同，如果最小值为 6，则不接受数字“26”的 2 之类的值，因为 2 < 6. 您可以使用计时器，或者实际上将此检查移到 keyup 和 keydown 事件之外，并检查 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;
}

Answer 4

文本框 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"));
    })
});

我对此很陌生，因此任何建设性的意见将不胜感激。

Answer 5

以下是您的脚本的示例：

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;
}

两个脚本都会动态检查值，这是一个很好的方法。

Answer 6

我创建了一个支持最小值、最大值的 jQuery SpinControl和步骤。它首先检查浏览器 (Opera) 是否已支持 SpinControl，然后再添加自定义控件。

Answer 7

我进行了搜索，最后我明白输入的值必须在三个事件中进行检查。 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，并且函数阻止了这种情况。所以我决定使用 keyup 事件来检查范围和正确的值。最后，当浏览器支持 HTML5 数字类型输入时， keydown 用于检查上下箭头和控制值，而不像 keypress 那样改变，因此您可以不使用它。

我写了一个简单的脚本，希望有所帮助。您可以在 http://jsfiddle.net/QMaster/r4hwr3a6/ 中看到它

Answer 8

JStepper 有一个错误，
我在他们的网站上尝试了测试仪。
http://jstepper.emkay.dk/Default.aspx

应用规则，
但我可以输入文字：8778.09999