为什么Chrome浏览器中HTML的maxlength和minlength属性不生效？

属性不生效的具体原因 #

你给出的两段代码分别存在不同的问题，对应如下：

第一段代码<input type="number" min="0" max=3" name="cw" id="cw">的问题

• 存在语法错误：max=3" 缺少属性值左侧的双引号，正确写法应为max="3"，语法错误会导致浏览器无法正确解析该属性。
• 即使修正语法后，min、max属性对type="number"输入框的默认生效逻辑为：仅限制输入框自带上下箭头的可调数值范围，以及表单提交时的合法性校验，不会主动拦截用户手动输入超出范围的数字，这是Chrome浏览器的标准实现逻辑，不属于属性失效。

第二段代码<input type="number" minlength="0" maxlength="3" name="cw" id="cw">的问题

minlength、maxlength属性仅适用于文本类输入类型（包括text、search、url、tel、email、password），对type="number"类型的输入框不生效，属于属性使用场景错误。如果需要限制数字输入的位数，可改用pattern属性配置正则规则，或通过JavaScript做输入拦截实现。

内容的提问来源于stack exchange，提问作者Fatih Sen