Restrict input type="number" to its min or max if it is out of range

Joshi picture Joshi · Apr 1, 2016 · Viewed 20.6k times · Source

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

Answer

Aaron Lavers picture Aaron Lavers · Apr 1, 2016

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/