readonly允许聚焦、复制但禁止编辑，值仍提交；disabled完全禁用交互且不提交值；二者均为布尔属性，存在即生效，误写如readonly="true"无效。
input 设置了 readonly 或 disabled 属性
这是最直接导致无法输入的原因。两者表现不同但结果一致：readonly 允许聚焦、复制，但禁止修改；disabled 则完全禁用交互，且表单提交时不会包含该字段值。
常见误写如 readonly="true" 或 disabled="false"——这些布尔属性只需存在即生效，值不参与判断。检查 DOM 时注意是否被 JS 动态添加了这些属性，尤其是表单校验失败后未及时移除 disabled 的情况。
- 排查方法：在开发者工具中选中 input 元素，看 Attributes 面板是否有
readonly或disabled - 修复建议：用
el.removeAttribute('readonly')或el.disabled = false清除，避免仅靠样式隐藏却保留属性 - 注意：Vue/React 中绑定
:disabled="isSubmitting"后忘记重置状态，也会造成“提交后永远不能输”
input 被其他元素遮挡或 z-index 失控
光标能出现、也能闪烁，但点击后无响应或输入无效，大概率是视觉上“能点”，实际上事件没落到 input 上。典型场景是父容器用了 position: relative，子层用了 position: absolute 且 z-index 过高，盖住了 input。
另一个隐蔽原因是 float 布局导致的文档流错位。比如三个 float: left 的 div 并排，最后一个实际渲染位置可能覆盖 input 区域，但 DOM 结构里它在 input 下方——这种错觉会让开发者反复检查 input 自身属性而忽略布局干扰。
- 快速验证：在开发者工具中右键 input → “Inspect”，再按
Ctrl+Shift+C（或 Cmd+Shift+C）悬停查看真实可点击区域 - 临时修复：给 input 加
position: relative; z-index: 2;，观察是否恢复输入 - 根本解法：避免混合使用
float和定位；用 Flex/Grid 替代老式浮动布局
type 属性拼写错误或语义错配
浏览器对错误的 type 值会降级为 type="text"，表面看能输，实则丢失原生能力。比如 type="emial"（少个 l）、type="num"（应为 number），或更隐蔽的 type="button" 被误用于文本输入框。
某些 type 在低版本 iOS Safari 中不被识别（如 date、datetime-local），会退化为普通文本框，但键盘类型、验证逻辑全失效，用户可能输完才发现格式不对。
- 检查重点：拼写是否与 HTML5 规范一致（
email、tel、search等） - 移动端特别注意：
type="number"不适合手机号（无法输 +、空格、-），改用type="tel"更合理 - 兼容性兜底：对关键 type（如
date）加 JS fallback，不要只依赖原生控件
JavaScript 事件监听器意外阻止默认行为
最易被忽略的坑：在 input 的父元素或 document 上绑定了 keydown/click 事件，并在处理函数中写了 return false 或 e.preventDefault()。这会同时取消冒泡和默认行为——输入框的字符插入就是默认行为之一。
JQuery 中的 return false 尤其危险，它等价于 e.preventDefault(); e.stopPropagation();，常出现在全局事件委托里，比如为了阻止表单默认提交而粗暴地对所有 form 绑定 return false，结果把内部 input 的输入也拦死了。
- 调试技巧：在控制台执行
getEventListeners(document)查看全局监听器 - 安全写法：只对特定事件目标调用
preventDefault()，例如if (e.target.tagName === 'FORM') e.preventDefault() - 警惕第三方脚本：CMS 主题、统计 SDK、广告代码常含此类全局监听，需逐个禁用测试
type="number" 输入框被 float 元素半遮挡，同时父层又绑了 return false 的 click 监听——这时候只修其中一项，问题依旧存在。动手前先做最小复现，剥离 CSS 和 JS，再逐层加回，才能准确定位真正卡点。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
