Question

I have a input type like this:

<input name="adult-count" type="text" data-perunit="2500" data-maxunits="5" class="up-down-spinner" value="0">

With data-maxunits. I set with javascript the max of the input. The input type is a spinner and you can going down and up with arrows.
If you exceed the max unit goes. You can not further click. But you can still enter a number that is greater.

How can I make. The input that you type up the number to enter. Limit to the data-maxunit.

Thanks!

Answer 1

you can bind an event onChange, to check if the value is greater then data-maxunits and if it is change it back to data-maxunits, like so:

document.getElementById('adult-count').addEventListener('change', function(e){
   var input = e.target;
   var maxunits = parseInt(input.getAttribute('data-maxunits'), 10);
   if(parseInt(input.value, 10) > maxunits)
      input.value = maxunits;
}, 1);