jquer numeric textbox with min and max ranges

Question

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

http://stackoverflow.com/questions/995183/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

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 2

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 3

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 4

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 5

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