HTML number input min and max not working properly

Question

I have type=number input field and I have set min and max values for it:

<input type="number" min="0" max="23" value="14"> 

When I change the time in the rendered UI using the little arrows on the right-hand side of the input field, everything works properly - I cannot go either above 23 or below 0. However, when I enter the numbers manually (using the keyboard), then neither of the restrictions has effect.

Is there a way to prevent anybody from entering whatever number they want?

Answer 1

Maybe Instead of using the "number" type you could use the "range" type which would restrict the user from entering in numbers because it uses a slide bar and if you wanted to configure it to show the current number just use JavaScript

Answer 2

With HTML5 max and min, you can only restrict the values to enter numerals. But you need to use JavaScript or jQuery to do this kind of change. One idea I have is using data- attributes and save the old value:

$(function () {    $("input").keydown(function () {      // Save old value.      if (!$(this).val() || (parseInt($(this).val()) <= 11 && parseInt($(this).val()) >= 0))      $(this).data("old", $(this).val());    });    $("input").keyup(function () {      // Check correct, else revert back to old value.      if (!$(this).val() || (parseInt($(this).val()) <= 11 && parseInt($(this).val()) >= 0))        ;      else        $(this).val($(this).data("old"));    });  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <input type="number" min="0" max="23" value="14" />