Limit user to put value in range in html input (type = number)
How can I prevent the user from adding a number greater than the maximum value and less than the minimum value in the html input (type = number)
<input id="ageRange" type="number" min=20 max= 50 maxlength=2></input>
I tried one javascript code, but it changes its value after adding the value, after which it changes the value. Is there a way I can stop the user from setting the value in the range, or is there just no flickering in the input cell and we change the value programmatically?
You will need to enter low level input and do your own checks. To prevent the user from typing a value greater than the maximum, you can handle the event keypress
, and then check the input character to see if the value is too large:
<input id="ageRange" type="number" min=20 max= 50 maxlength=2>
<script>
document.getElementById('ageRange').onkeypress =
function (e) {
var ev = e || window.event;
if(ev.charCode < 48 || ev.charCode > 57) {
return false; // not a digit
} else if(this.value * 10 + ev.charCode - 48 > this.max) {
return false;
} else {
return true;
}
}
</script>
This prevents the user from inserting a larger value when pasting.
To prevent the user from deleting characters to make the value too small, you will need to handle the rubout key, which is more problematic due to the differences in the keyboard. But that would be bad usability. Suppose the user types 30 and then realizes that they mean 40. A code that prevents a value from being changed too small will not allow any digit to be deleted!
Browsers are expected to have their own user interface for <input type=number>
, and that's the reason for using it. The interface is not intended to prevent the user from entering too large values, but to detect and report them so that the user can correct them. Before attempting to substantially change this, consider potential confusion. If you add code that prevents out-of-class values, browsers will not show diagnostic messages (for example, "The number must be less than or equal to 50"), as they do by default, if they support <input type=number>
, so your JavaScript code should probably return its own. own diagnostics.
source to share
Read the documentation for the input element .
as an alternative:
Read HTML5 Limit Checker
<input id="age" pattern="[0-9]" value="9" />
<script>
document.getElementById('age').validity.patternMismatch;
</script>
And then read the Regex Numeric Range Match
source to share
Try the following:
var max = 100;
$('input').keyup(function(){
var inputValue = $(this).val();
if(inputValue > max){
alert('greater!');
$(this).val('')
}
})
here's a jsfiddle: http://jsfiddle.net/h07Lc0Ld/1/
source to share