如何解决HTML输入类型编号不适用于maxlength
我正在使用以下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>
解决方法
不幸的是,类型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
最大长度将不适用于enter link description here来解决您的问题
,您可以尝试一下。
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/>
,
使用 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。 只能在表单内使用。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。