HTML输入类型编号不适用于maxlength

Question

我正在使用以下html标签，但无法获得数字限制，我只需要用户输入12位数字，但是根据默认情况，每个HTML标签“ maxlength”不适用于<input type ="number">，我尝试了最小和最大标签，也没有帮助。

您是否可以分享仅使用HTML的方式？

<input type="number" name="Aadhar" maxlength="12" placeholder="xxxx-xxxx-xxxx" pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}" required>

Answer 1

不幸的是，类型maxlength的输入不支持number属性。因此，最好的方法是使用JS。请参考以下文档，它们可能会使您更加清楚。

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength
• https://html.com/attributes/input-maxlength/
• maxlength ignored for input type="number" in Chrome

Answer 2

最大长度将不适用于enter link description here来解决您的问题

Answer 3

您可以尝试一下。

function numOnly(id) {
    // Get the element by id
    var element = document.getElementById(id);
    // Use numbers only pattern, from 0 to 9 with \-
    var regex = /[^0-9\-]/gi;
    // Replace other characters that are not in regex pattern
    element.value = element.value.replace(regex, "");
}

<input type="text" id="number" oninput="numOnly(this.id);" name="Aadhar" maxlength="14" placeholder="xxxx-xxxx-xxxx" pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}" required/>

Answer 4

使用 max 代替maxlength

<input type="number" name="Aadhar" max="12" placeholder="xxxx-xxxx-xxxx" pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}" required>

当用户单击“提交”按钮时，它将显示该值应小于12。 只能在表单内使用。