javascript - How to restrict Textbox value with the max value on key events? - Stack Overflow

admin管理员组

文章数量:1401841

I have a text box i want to restrict that value for max value using key events

I try with the below code and its work fine

function validateRange(ele) {       
    if(ele.val() < 0 || ele.val() > 100){
        console.log('false');
    }else{
        console.log('true');
    }
}
$('.digit-validation').keyup(function(event){
    validateRange($(this));
});

HTML:

<form:input type="text" path="depth" cssClass="number inplace-textbox digit-validation" data-min="0" size="10" />

I would like if(ele.val() < 0 || ele.val() > 100) is stop keypress.

Update: I am trying to do range of values validation.

I have a text box i want to restrict that value for max value using key events

I try with the below code and its work fine

function validateRange(ele) {       
    if(ele.val() < 0 || ele.val() > 100){
        console.log('false');
    }else{
        console.log('true');
    }
}
$('.digit-validation').keyup(function(event){
    validateRange($(this));
});

HTML:

<form:input type="text" path="depth" cssClass="number inplace-textbox digit-validation" data-min="0" size="10" />

I would like if(ele.val() < 0 || ele.val() > 100) is stop keypress.

Update: I am trying to do range of values validation.

• javascript
• jquery

Share Improve this question Follow edited Sep 23, 2013 at 9:19 Harry 89.8k2626 gold badges214214 silver badges223223 bronze badges asked Sep 23, 2013 at 8:48 Sophea PhySophea Phy 38833 silver badges2020 bronze badges 7

• You want to stop someone entering text if they haven't entered enough text? Or am I misunderstanding the use of the data-min lower-boundary? – David Thomas Commented Sep 23, 2013 at 8:50
• 5 Any reason for not using maxlength attribute? – Harry Commented Sep 23, 2013 at 8:51
• It can use with (. eg.99.99) so I can't use with maxlength. – Sophea Phy Commented Sep 23, 2013 at 8:54
• What's the actual problem you're trying to solve? It seems like you're trying to solve your choice of a solution, rather than solving the actual problem you started with. What's your goal? See 'What is the XY problem?' – David Thomas Commented Sep 23, 2013 at 9:03
• @SopheaPhy: Are you trying to do max/min length validation (or) range of values validation (like user can enter number between 1 and 100)? – Harry Commented Sep 23, 2013 at 9:03

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 2

I'd suggest that you try and use the HTML5 input type of number, with min and max attributes:

<input type="number" min="0" max="100" />

JS Fiddle demo.

This allows the user to enter a number directly (using the keyboard, or copy/paste), and allows for control of the increments using the step attribute (step="2", for example, will allow increments, or decrements, of 2 on every click of the spinner arrows).

If, however, you must use a non-number input:

Number.prototype.between  = function (a, b, inclusive) {
    var min = Math.min.apply(Math, [a,b]),
        max = Math.max.apply(Math, [a,b]);
    return inclusive ? this >= min && this <= max : this > min && this < max;
};

$('.digit-validation').keydown(function(event){
    var v = parseFloat(this.value + String.fromCharCode(event.which));
    return parseFloat(v).between(0,100,true);
});

JS Fiddle demo.

Why do you not use maxlength HTML attribute ?

<input type="text" maxlength="100" />

There is no need to use JS to achieve this.

For your validation, you need 2 things :

1. check if the user enters a number
2. check if the user enters something between 0 and 100

For the 1st one, since you use jQuery, you can use $.isNumeric(). For the 2nd one, you need to parse the value as integer thanks to parseInt().

That would give you :

http://jsfiddle/tLwYX/

function validateRange(ele) {    
    var val = ele.val();
    if(!$.isNumeric(val) || parseInt(val,10) < 0 || parseInt(val,10) > 100){
        $('#result').html('false');
    }else{
        $('#result').html('true');
    }
}
$('.digit-validation').keyup(function(event){
    validateRange($(this));
});

本文标签： javascriptHow to restrict Textbox value with the max value on key eventsStack Overflow