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

Posted 2023-03-05

【中文标题】HTML 输入类型编号不适用于 maxlength

【英文标题】：HTML Input type number is not working with maxlength

【发布时间】：2021-01-02 19:58:05

【问题描述】：

我正在使用下面的 html 标记并且无法获得对数字的限制，我只需要用户输入 12 位数字，但是默认情况下按照 HTML 标记“maxlength”不适用于<input type ="number">，我尝试了 min 和最大标签，它也没有帮助。

您能否分享一下仅在 HTML 中执行此操作的方法？

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

【问题讨论】：

我注意到您使用的是数字输入，但占位符和模式不是数字 (xxxx-xxxx-xxxx)。如果您使用文本输入，这可能会更好吗？

我尝试输入文本，它限制了长度，但是它需要字母数字。

这能回答你的问题吗？ How can I limit possible inputs in a HTML5 "number" element?

【参考方案1】：

最大长度不适用于 click here to read more 来解决您的问题

【参考方案2】：

很遗憾，number 类型的输入不支持 maxlength 属性。因此，最好的办法是使用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

【参考方案3】：

使用 ma​​x 代替 maxlength

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

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

【讨论】：

我认为这会将最大值与最大长度混淆。

【参考方案4】：

你可以试试这个。

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

【讨论】：

谢谢你的回复，我只需要在 HTML 中做，没有 JS。