input标签无内置状态切换能力，需属性+css伪类+js配合实现；disabled使元素脱离表单流程，readonly仅禁编辑但仍可聚焦和提交；focus/blur需事件监听，验证状态需reportvalidity()等主动触发。
input 标签本身不提供“状态切换”能力，所有视觉或行为上的状态变化（如聚焦、禁用、只读、验证失败）都依赖属性控制 + CSS 伪类 + JavaScript 逻辑配合。直接写 input 不会自动切换状态，必须显式设置 disabled、readonly、required 等属性，或监听事件手动干预。
disabled 和 readonly 的区别到底在哪
这两个属性看起来都是“不让用户改”，但浏览器处理逻辑完全不同：
-
disabled：元素完全脱离表单流程 —— 不可聚焦、不可交互、不参与表单提交、不触发focus/input事件，CSS 中:disabled伪类可用 -
readonly：仅阻止编辑，仍可聚焦、可选中、可复制、参与表单提交，:read-only伪类匹配，但移动端软键盘可能仍会弹出（尤其 iOS Safari） - 两者同时存在时，
disabled优先级更高，readonly被忽略 - 动态切换建议用 JS 控制：
el.disabled = true或el.setAttribute('readonly', '')，避免直接操作el.readOnly = true（注意大小写）
如何让 input 在 focus/blur 时触发样式或逻辑
原生 input 没有内置“状态切换组件”，但可通过事件监听实现：
- 聚焦时加 class：
el.addEventListener('focus', () => el.classList.add('focused')) - 失焦时校验并反馈：
el.addEventListener('blur', () => { if (!el.checkValidity()) el.classList.add('invalid'); }) - 注意：移动端
focus行为不稳定，iOS 上input可能不触发focus，需结合click或touchstart - 不要依赖
:focus-within套input父容器来控制子元素样式 —— 它在部分安卓 WebView 中支持不佳
required + pattern 触发的验证状态怎么稳定控制
HTML5 表单验证的状态（如 :valid、:invalid、:user-invalid）不是实时更新的，容易踩坑：
-
:invalid在用户首次输入后才生效；初始空值时，required字段默认是:invalid，但用户未 interaction 前可能不渲染样式 -
checkValidity()返回布尔值，但不会自动触发 UI 反馈；要强制显示错误，得调用reportValidity() -
pattern中正则必须全匹配（隐式加 ^$），比如pattern="\d{6}"不能写成pattern="\d+"后靠 JS 截断 - 自定义错误提示建议用
setCustomValidity()配合invalid事件，而不是覆盖浏览器默认提示框（体验割裂）
真正难的不是加个 disabled 或写个 :focus，而是理解每个状态背后浏览器的参与程度——有些状态纯 CSS 可控，有些必须 JS 干预，有些在特定 UA 下根本不可靠。别把“看起来动了”当成“状态已切换”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
