Html输入字段设置最大值[重复]答案

【问题标题】：Html input field set maximum value [duplicate]Html输入字段设置最大值[重复]
【发布时间】：2017-10-17 14:21:36
【问题描述】：

如果我在字段中输入数字，max 属性将不起作用。为什么？它仅在我用箭头更改值时才有效。

HTML

<input id= "0" class='labelmax form-control'  
type='number' name='max_label' min='0' max='99' value='1'>

【问题讨论】：

当您将其放入表单时，如果您输入的值超出了最小值和最大值，它将不会提交。
查看我编辑的您的 ja fiddle：它适用于提交 ittl 提供的错误 ID 超过 99：jsfiddle.net/usdc3359/2

标签： javascript html input

【解决方案1】：

对于 HTML5 最大值和最小值，您只能限制值以输入数字。但是你需要使用 JavaScript 或 jQuery 来做这种改变。我的一个想法是使用 data- 属性并保存旧值：

$(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()) <= 99 && parseInt($(this).val()) >= 0)
      ;
    else
      $(this).val($(this).data("old"));
  });
});

【讨论】：

【解决方案2】：

为了让它自动工作，你必须将你的输入包装在一个表单中并向该表单添加一个提交按钮

如果您不想将其包装在表单中并希望最大程度地进行自定义，则必须使用 Javascript 并设置一个事件处理程序，该处理程序将侦听用户输入并采取相应措施

【讨论】：

【解决方案3】：

您可以通过使用简单的 JavaScript 来使用如下所示的内容。在您的代码中，我没有看到任何 JS。

 document.getElementsByClassName('labelmax form-control')[0].oninput = function () {
        var max = parseInt(this.max);

        if (parseInt(this.value) > max) {
            this.value = max; 
        }
    }

&lt;input id= "0" class='labelmax form-control'  type='number' name='max_label'  max='99' value='1'/&gt;

【讨论】：

不过，我仍然可以输入小于 0 的数字。您还应该检查最小值。