如何限制HTML输入框仅允许输入10位数字？pattern属性验证失效求助

问题根源 #

• type="number" 输入框不支持 maxLength 属性，该属性仅对文本类输入（如type="text"、type="tel"）生效。
• 当输入框类型为number时，pattern 属性匹配的是输入值转换为字符串后的格式，但浏览器对number类型的pattern验证支持有限，且用户输入非数字字符会被自动过滤，导致验证逻辑不符合预期。

修复方案 #

将输入框类型改为type="tel"（适配数字类输入场景，支持移动端数字键盘）或type="text"，同时保留pattern和maxLength，可额外添加inputmode="numeric"优化移动端输入体验。

最终代码 #

<input type="tel" 
       maxLength="10" 
       placeholder="Enter ABHA Address" 
       pattern="[1-9][0-9]{9}" 
       name="ABHA Address" 
       inputmode="numeric" 
       required />

代码说明 #

• type="tel"：既支持纯数字输入，又能正常触发maxLength和pattern验证，移动端会自动弹出数字键盘。
• pattern="[1-9][0-9]{9}"：简化原正则（{1}可省略），确保第一位为1-9的非零数字，后续9位为0-9数字，总长度严格为10位。
• inputmode="numeric"：强制移动端显示数字键盘，提升输入便捷性。
• required：若需必填验证可添加，提交表单时会自动触发pattern规则检查。

如果坚持使用type="number"，只能通过JavaScript辅助实现验证，但远不如改用tel/text类型简洁可靠。

内容的提问来源于stack exchange，提问作者shivam choudhary