Javascript or jQuery to accept numbers less than 100 for text field
Question
In my project I have a text field where I need to accept values less than or equal to 100. In that text field how can I achieve this through javascript or jquery. Somehow I have managed to accept only numbers in text box but how can i restrict it not accept numbers greater than 100.
Here is the code which I have tried to accept only numbers
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
8 answers
solution1
7 ACCPTED 2014-04-04 11:51:47
First off, you can use number type in HTML5 with the max attribute set to 100.
<input id="numberbox" type='number' max='100'>
This will allow your browser to detect when it's over 100 when submitted. However, it won't work on older browsers and some smartphones.
Alternatively, you could do this:
<input type='text' maxlength='2' pattern='^[0-9]$'>
But I feel this option is overkill. But if you want to do it that way, that's up to you.
In jQuery, you can do this:
$('#numberbox').keyup(function(){ if ($(this).val() > 100){ alert("No numbers above 100"); $(this).val('100'); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='text' id='numberbox'>
Please also validate back-end, someone with only just enough knowledge could easily bypass this.
solution2
2 2014-04-04 12:02:26
Check this demo
Also you have to restrict the length of text field
Something like this
var fieldVal = document.getElementById('txtF').value;
//Suppose u want number that is less than 100
if(fieldVal < 100){
return true;
}
else
{
//
}
solution3
1 2014-04-04 11:51:22
With jquery you can to something like this :
$('#my-field').blur(function() {
if(parseInt($(this).val()) < 100) {
$(this).val('');
}
});
The blur event is thrown when user leave the field (field loose the focus). Then it chekcks if the value is less than 100 and empty it if necessary.
solution4
1 2014-04-04 11:52:23
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
var str = String.fromCharCode(charCode);
if (str>100)) {
return false;
}
return true;
}
you can use fromCharCode it can return character
solution5
1 2014-04-04 11:52:59
please use max length
maxlength="2"
EX.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
PIN: <input type="text" name="pin" maxlength="2" size="30"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
solution6
1 2014-04-04 11:53:10
You can do this:
$('yourElem').on('keydown', function(e){
if(this.value > 100){
alert('You have entered more than 100 as input');
return false;
}
});
maxlength attribute can restrict the numbers more than 3 digits, so you can use this to restrict:
maxlength="3"
yet you need to do js validation as suggested above because user with maxlength still can enter more than 100 as asked.
solution7
1 2014-04-04 11:53:27
Try this:
<script type="text/javascript">
function fnc(value, min, max)
{
if(parseInt(value) < 0 || isNaN(value))
return 0;
else if(parseInt(value) > 100)
return "Number is greater than 100";
else return value;
}
</script>
<input type="text" name="textWeight" id="txtWeight" maxlength="5" onkeyup="this.value = fnc(this.value, 0, 100)"/>
solution8
1 2014-04-04 11:56:48
along with your code you can add one more line to restrict text-field to accept less than 2 char....
if (charCode.length > 2) {
return false;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.