问题描述
我正在使用以下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。 只能在表单内使用。