HTML input标签如何实现输入框状态切换及全攻略解析？

本文共计819个文字，预计阅读时间需要4分钟。

input 标签本身不提供状态切换功能，但可以通过属性和JavaScript逻辑配合实现。所有视觉或行为上的状态变化（如聚焦、禁用、只读、验证失败等）都依赖于CSS伪类和JavaScript逻辑的配合。

直接使用 input 标签不会自动切换状态，需要通过以下方式实现：

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 下根本不可靠。别把“看起来动了”当成“状态已切换”。