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

Question

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

Possible duplicate of [Restrict user to put value in range in html input (type = number)](http://stackoverflow.com/questions/25825843/restrict-user-to-put-value-in-range-in-html-input-type-number) — Lalji Tadhani, Apr 01 '16 at 06:38
No it is on key press. I need restriction on directly entering in the textbox — Joshi, Apr 01 '16 at 06:46
Any way to disable textbox edit and should use only the keypress? — Joshi, Apr 01 '16 at 06:49

score 10 · Answer 1 · edited Nov 11 '19 at 04:52

10

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/

edited Nov 11 '19 at 04:52

Issung

385
3
14

answered Apr 01 '16 at 07:09

Aaron Lavers

967
9
31

1

This works but I was not expecting jQuery. Actually input type=number only handles and not allows user to submit the form if the entered number is not in range – Joshi Apr 01 '16 at 07:20
1

@AaronLavers in this solution, it accepts 'e' as number :) you should use parseInt() on input value and isNaN() in a else-if statement ;) – l2ysho Sep 18 '17 at 18:57

Vincent · Answer 2 · 2021-03-18T18:44:28.353

10

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.

edited Mar 18 '21 at 18:44

answered Dec 12 '18 at 22:38

Vincent

1,741
23
35

2

Probably should be onblur rather than onkeyup, in case the minimum is more than a single digit – russell Mar 05 '22 at 01:03
This answer also accepts 'e' as a number. – Tim Apr 18 '23 at 19:52
This does not seem to work for my use case. I have input type with ```min = 12``` and ```max = 30```. Lets say I want to set value 15. As soon as I type value 1, it will automatically set the value to 12. If I try to backspace to remove the digit "2", it will automatically set to 12 again. I think this example only works if min is > 0 – TheBestPlayer Jul 11 '23 at 05:24
1

UPDATE. Replacing onkeyup with onblur fix my issue. – TheBestPlayer Jul 11 '23 at 05:26

score 6 · Accepted Answer · answered Nov 14 '17 at 09:30

6

Actually input type=number only handles and not allows user to submit the form if the entered number is not in range

answered Nov 14 '17 at 09:30

Joshi

573
3
11
24

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

3 Answers3

Related