对于<input type="number">元素,maxlength无效。如何限制该数字元素的最大长度?


当前回答

更相关的属性是min和max。

其他回答

您可以添加一个max属性,该属性将指定您可以插入的最大数字

<input type="number" max="999" />

如果你同时添加Max和min值,你可以指定允许值的范围:

<input type="number" min="1" max="999" />

以上仍然不会阻止用户手动输入指定范围之外的值。相反,他会看到一个弹出窗口,告诉他在提交表单时输入一个范围内的值,如下面的截图所示:

梅考·莫拉的回答是一个好的开始。 然而,他的解决方案意味着当您输入第二个数字时,所有字段的编辑都会停止。因此,您不能更改值或删除任何字符。

下面的代码停在2,但允许继续编辑;

//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"

假设您希望允许的最大值为1000—可以是键入的,也可以是使用旋转器的。

你可以使用以下方法限制微调器值: Type ="number" min="0" max="1000"

并且用javascript限制键盘输入的内容: onkeyup =“如果(方法(this.value) > 1000){。值= 1000;返回错误;}”

<input type="number" min="0" max="1000" onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }">

如果您正在寻找一种移动Web解决方案,希望用户看到数字键盘而不是全文键盘。使用类型=“电话”。它将与maxlength一起工作,这将节省您创建额外的javascript。

Max和Min仍然允许用户输入超过Max和Min的数字,这不是最佳的。

HTML输入

 <input class="minutesInput" type="number" min="10" max="120" value="" />

jQuery

 $(".minutesInput").on('keyup keypress blur change', function(e) {

    if($(this).val() > 120){
      $(this).val('120');
      return false;
    }

  });