jquery numeric textbox with min and max ranges

Question

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?

Answer 1

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 :)

Answer 2

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>

Answer 3

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

Answer 4

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.

Answer 5

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.

Answer 6

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.

Answer 7

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

Answer 8

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/