当前位置： 文江博客话题详情

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

发布于 2024-08-17 10:59:33 字数 397 浏览 10 评论 0原文

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

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

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

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

原文

i see this question but none of the solutions support min and max values range

How to allow only numeric (0-9) in HTML inputbox using jQuery?

I see that http://jstepper.emkay.dk/ attempts to do this but seems very buggy as it allows you to enter multiple decimal places and other characters such as ";".

is there i way i can use one of these solutions and also say, only support min of 0 and max of 100 in the textbox entry?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（8）

纵情客 2024-08-24 10:59:33

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

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

I am the author of jStepper and I just updated the plugin to be able to do what you like.

So give it a try again and see if it works now :)

回复 原文
物价感观 2024-08-24 10:59:33

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

HTML5 way of adding such fields. Works in Chrome and Safari:

<input type="range" min="0" max="100" step="1" />

A complete example:

<input id="picker" type="range" min="0" max="100" step="1" onchange="$('#pickerValue').text(this.value)" />
<div id="pickerValue"></div>
回复 原文
陪你到最终 2024-08-24 10:59:33

创建仅接受范围的自定义类型的文本框。像这样的东西应该可以工作：

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

Create a custom type of text box that only accepts ranges. Something like this should work:

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

To use it in, simple create a new TextBox by calling new RangeTextBox(min, max). For example

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

Disclaimer: This suffers from the same problem as listed by Harmen in the other answer of field not accepting a value like 2 for the number "26" if minimum value is 6 as 2 < 6. You could use a timer, or actually move this check outside of the keyup and keydown events, and check onblur or onchange instead. That would allow invalid data to enter the field though but its a lot less annonying.

Edit: This solution let's you enter anything, but flags all invalid input including out of ranges.

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

And the stylesheet:

<style type="text/css">
.error {
    color: red;
}
回复 原文
狠疯拽 2024-08-24 10:59:33

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

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

Textbox MIN MAX - jQuery function

Here is a way to for example, "only support min of 0 and max of 100 in a textbox entry" using jQuery. It works by returning your entry to what it was before - if you enter a key that results in the value being less than MIN or more that MAX. You can set a flag to accept only integers.

The HTML tag would look like this: (JSFIDDLE)

<input type="text" class="maxmin" min="0" max="100" intOnly="true" />

Then you'd run this JavaScript in your document ready code:

// 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"));
    })
});

I'm new to this, so any constructive comments would be appreciated.

回复 原文
夏末 2024-08-24 10:59:33

以下是您的脚本的示例：

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

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

Here is an example of how your script could look like:

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

But it has a big disadvantage, you can't enter 26 if the minimum is 6, because 2 < 6. This is not a problem if you have a minimum less than or equal to 10.

However, if your minimum is more than 10, you could consider this code:

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

It checks the input with a delay of one second. You need some CSS code for this, for example:

input.error {
    border: 2px solid red;
}

Both scripts check the values on the fly, which is a great method.

回复 原文
巾帼英雄 2024-08-24 10:59:33

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

I've created an jQuery SpinControl that supports min, max and step. It first checks if a SpinControl already is supported by the browser (Opera), before it adds a custom one.

回复 原文
居里长安 2024-08-24 10:59:33

我进行了搜索，最后我明白输入的值必须在三个事件中进行检查。 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/ 中看到它

I searched and finally i understand entered value must be check in three event. keydown, keypress and keyup and any of them has own responsibilities.
keypress:
Check the key pressed and decided about entered character. Then if it is numeric let it otherwise prevent the action. As you can see i tried to check range here

//var final = val + String.fromCharCode(charCode);        
//alert(final);        
//if (final < min || final > max)
// return false;

but we just have new character and value before that. so that is wrong way if we try to check sum of them because maybe user selected some part of the value and new character standing rather. suppose max range is 100 and we have "345" in Input and user selected "34" now user press "2" and the result must be "25", but sum of "345" + "2" is 347 and function prevent that. So i decided to use keyup event to check range and correct value. Finally keydown used to check up and down arrow and control value when browser support HTML5 number type of input without changing like keypress so you can don't use that.

I wrote a simple script and hope that help. You can see it in http://jsfiddle.net/QMaster/r4hwr3a6/

回复 原文
So尛奶瓶 2024-08-24 10:59:33

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

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

JStepper have a bug,
I try the tester in their site.
http://jstepper.emkay.dk/Default.aspx

apple the rules,
but i can input the text : 8778.09999

回复 原文
~没有更多了~

关于作者

揽清风入怀

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文