I have the below code
<form:input type="number" min="1" max="4" size="5" value="1" path="n" name='n' placeholder="<5" style="height:25px;width:60px"></form:input>
if a user enters a value in the textbox out of range then it should reset to its nearest min or max value, for example if user enters in textbox as less than 1 then it should get reset to 1, if he enters more than 4 then it should get reset to 4.
Please advice if we have any other tag instead of using input tag to restrict
There is a solution already which is not working for me
This solution might be what you're after: jquery: set min max input in option type number
$(function () {
$( "input" ).change(function() {
var max = parseInt($(this).attr('max'));
var min = parseInt($(this).attr('min'));
if ($(this).val() > max)
{
$(this).val(max);
}
else if ($(this).val() < min)
{
$(this).val(min);
}
});
});
@Caspian also provided a working fiddle: http://jsfiddle.net/Ddk67/75/
It would be nice if HTML5 actually prevented values from being entered because preventing the value from being submitted only, does not satisfy all use cases.
In such cases I would call the following function on keyup.
function imposeMinMax(el){
if(el.value != ""){
if(parseInt(el.value) < parseInt(el.min)){
el.value = el.min;
}
if(parseInt(el.value) > parseInt(el.max)){
el.value = el.max;
}
}
}
Usage example
<input type=number min=1 max=4 onkeyup=imposeMinMax(this)>
This will reset the value to the max value if the user types in a greater value, and will reset it to the min value if the user types in a lesser value.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With