HTML编号输入min和max无法正常工作

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

我有type = number输入字段，我为它设置了最小值和最大值：

<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.

当我使用输入字段右侧的小箭头更改渲染UI中的时间时，一切正常 - 我不能超过23或低于0.但是，当我手动输入数字时（使用键盘），那么这两个限制都没有效果。

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

有没有办法阻止任何人输入他们想要的任何数字？

4 个解决方案

#1

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:

使用HTML5 max和min，您只能限制值以输入数字。但是你需要使用JavaScript或jQuery来做这种改变。我有一个想法是使用数据属性并保存旧值：

$(function () {
  $("input").keydown(function () {
    // Save old value.
    $(this).data("old", $(this).val());
  });
  $("input").keyup(function () {
    // Check correct, else revert back to old value.
    if (parseInt($(this).val()) <= 23 && 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" />

#2

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

也许不使用“数字”类型，您可以使用“范围”类型，这将限制用户输入数字，因为它使用滑动条，如果您想配置它以显示当前数字，请使用JavaScript

#3

if you still looking for the answer you can use input type="number".
min max work if it set in that order:
1-name
2-maxlength
3-size
4-min
5-max
just copy it

如果您仍在寻找答案，可以使用input type =“number”。 min max work如果按顺序设置：1-name 2-maxlength 3-size 4-min 5-max只需复制它

<input  name="X" maxlength="3" size="2" min="1" max="100" type="number" />

when you enter the numbers/letters manually (using the keyboard), and submit a little message will appear in case of letters "please enter a number" in case of a number out of tha range "please select a value that is no more/less than .."

当你手动输入数字/字母（使用键盘），并提交一个小信息将出现在字母“请输入数字”的情况下，如果一个数字超出范围“请选择一个不再有的值/少于 ..”

#4

In some cases pattern can be used instead of min and max. It works correctly with required.

在某些情况下，可以使用模式代替min和max。它可以正常工作。

#1