绝大多数input属性“不生效”并非浏览器bug，而是因属性未真实渲染到dom、被js覆盖、type不匹配或校验时机未触发；需通过devtools确认最终属性值、type是否为标准小写、是否满足激活条件（如submit事件），并注意min/max等需用setattribute设置字符串值。
绝大多数 input 属性“不生效”，不是浏览器 bug，而是属性没被识别、被覆盖、或根本没触发校验时机。先确认它是否真在 DOM 里存在、是否被 JS 动态改写、是否依赖特定 type 或交互条件。
检查属性是否真的渲染到最终 DOM 中
浏览器 DevTools 的 Elements 面板看到的才是真实状态——源码写的 minlength="3" 可能被 JS 覆盖成 minlength="" 或直接删掉；autocomplete="off" 若写在 form 上，对子 input 完全无影响。
- 右键检查元素 → “Edit as HTML” 看实际属性值，注意有无引号、空格、大小写（如
type='TEXT'不匹配type="text"） -
readonly、disabled这类布尔属性，只要存在就生效，无需等号和值；但min、max、minlength必须是字符串数字（如"5"），不能是变量或表达式 - 用 JS 修改时，优先用
el.setAttribute('min', '10')，而不是直接赋值el.min = 10（后者可能不触发校验逻辑）
确认 type 属性是否匹配功能需求
type 决定原生行为：没设 type="number"，min/max 就是摆设；写成 type="num" 或 type="emial"，浏览器直接降级为 text，所有数值/邮箱逻辑全丢。
- 验证是否生效：在 Elements 面板中确认
type值是标准小写字符串（"email"✅，"Email"❌） - 移动端键盘适配失败？
type="tel"才弹数字键盘，type="number"会带小数点和负号，反而干扰手机号输入 -
type="password"被 JS 动态切换过（比如从text切回来），Chrome 会拒绝识别为密码字段，导致autocomplete="current-password"失效
验证是否在正确时机触发
HTML5 表单属性大多只在特定条件下激活：不点提交、不调 checkValidity()、不触发 input 或 change 事件，很多校验根本不会跑。
-
required和minlength在表单 submit 时才阻断，JS 用fetch()提交时必须手动调form.checkValidity() -
oninvalid事件只在浏览器原生校验失败时触发，若你写了event.preventDefault()又没手动校验，它就永远不会执行 -
:invalidCSS 伪类默认只在用户交互后（如失焦、输入）才启用，首次加载页面时不会显示红色边框
排查样式或布局导致的“假失效”
输入框看起来不能输、不响应、提示不出现，有时根本不是属性问题，而是视觉或事件被拦住了。
-
font-size: 0、opacity: 0、pointer-events: none会让输入框不可见或无法聚焦 - 父容器
overflow: hidden或兄弟元素z-index过高，可能遮挡光标或软键盘弹出区域 -
user-select: none在某些 Android WebView 中会导致长按复制失效，甚至影响焦点获取
最常被忽略的一点：很多“不生效”其实是多个属性互相冲突的结果，比如同时设了 minlength="3" 和 required，又在 JS 里清空了 value 却没重置校验状态——这时候 setCustomValidity('') 和 reportValidity() 的调用顺序，比属性本身还关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
