maxlength、pattern在type="number"下失效，required遇disabled不校验；maxlength仅对文本类有效，pattern需裸字符串且自动锚定，disabled字段不参与任何验证。
HTML input 元素不是“写对就能用”，很多看似合理的写法在真实场景中会失效——比如 maxlength 对 type="number" 无效，required 在 disabled 状态下不触发校验，pattern 的正则不加 ^$ 边界会导致误通过。关键得看属性和 type 的组合是否被浏览器真正支持。
哪些 input 属性在 type="number" 下会失效或行为异常
type="number" 表面是“数字输入框”，但它的语义和验证逻辑与字符串型输入完全不同。很多开发者直接套用 text 的习惯，结果埋下兼容性或逻辑漏洞。
-
maxlength完全不生效：浏览器忽略该属性，用户仍可输入任意长度数字（如输入12345678901234567890不报错）；应改用min/max限制数值范围，或用 JS 监听input事件截断 -
pattern仅在部分 Chromium 内核浏览器中起作用，且必须配合title才显示提示；Safari 和 Firefox 基本无视该属性 -
value设置为非数字字符串（如"abc"）时，读取input.value会返回空字符串，而非原始值；应优先用input.valueAsNumber获取数值类型 - 移动端软键盘行为不可控：iOS 上仍可能弹出全键盘，不能保证只出数字键盘；若需强约束，建议 fallback 到
type="tel"+ 自定义校验
required 和 disabled 同时存在时的校验陷阱
required 只在控件“可交互”且“无值”时触发校验。一旦加上 disabled，该字段就从表单数据中被剔除，也不参与任何验证流程——哪怕它视觉上还在页面上。
- 表单提交时，
disabled的input不会出现在FormData或form.elements中，后端收不到该字段 - 即使 DOM 中设置了
required，disabled会让整个校验链路短路；JS 调用checkValidity()也返回true - 想“视觉禁用但保留提交”，应改用
readonly+ CSS 灰色样式；readonly字段仍参与required校验，且值会被提交 - 动态切换状态时注意：从
disabled改为enabled后，需手动调用input.reportValidity()才能触发即时校验（否则要等用户再次提交）
placeholder 和 value 同时设置时谁优先显示
value 永远压倒 placeholder。只要 value 存在（哪怕是空字符串 ""），placeholder 就不会出现——这点常被忽略，尤其在 React/Vue 等框架中由 state 控制 value 时。
- 服务端渲染或 SSR 场景下，如果后端传了
value=""，前端 placeholder 就完全不可见；应确保初始value为undefined或不设该属性 -
placeholder是纯提示，不参与表单提交；它不替代label，无障碍场景下屏幕阅读器可能完全忽略它 - 想实现“有默认值但又希望 placeholder 可见”，只能用 JS 清空
value并 focus 后再还原，但体验割裂；更稳妥做法是用label+ CSS 实现浮动标签（floating label）效果 - 国际化项目中，
placeholder文本需随语言切换，但不能靠value属性控制；应绑定到 JS 变量并用事件监听更新
autocomplete="off" 实际上经常不起作用的原因
现代浏览器（Chrome ≥ 76、Edge ≥ 79、Firefox ≥ 80）已将 autocomplete="off" 视为建议而非指令，尤其对 type="password" 或含 name="password" 的字段，会主动忽略该设置以保障密码管理器可用性。
- 真正禁用自动填充，需组合使用：
autocomplete="new-password"（适用于注册页密码确认）、autocomplete="one-time-code"（短信验证码） - 对敏感字段（如银行卡号），可把
name设为随机字符串（如name="cardnum_12345"），避免被浏览器识别为标准字段名 - 某些银行类网站还会额外添加
autocapitalize="off" autocorrect="off" spellcheck="false"防止 iOS 键盘纠错干扰 - 注意：若整个
form设置了autocomplete="off"，子input的autocomplete值会被继承，除非显式覆盖
input 的坑不在语法难，而在属性之间隐性的互斥关系和浏览器策略的悄然演进。最危险的不是报错，而是“看起来正常却悄悄漏数据”——比如 disabled+required 组合让字段消失，或 number 类型下 maxlength 形同虚设。动手前先查 MDN 的 [input 兼容性表](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#%E5%85%BC%E5%AE%B9%E6%80%A7) 和当前 Chrome/Firefox/Safari 的实际行为，比死记属性列表管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
