只读输入框禁用点击和聚焦的正确解法是：保留readonly确保值提交，加tabindex="-1"防tab聚焦，css设user-select:none和cursor:default，js监听click/focus并e.preventdefault()+blur()，移动端需onfocus="this.blur()"。
只读输入框的 pointer-events: none 为什么不管用
因为 input[readonly] 本身仍响应鼠标事件，pointer-events: none 会一并禁掉光标定位、选中文本等合理交互，不是“禁止点击”的正确解法。只读 ≠ 不可操作，浏览器默认允许聚焦和文本选择。
- 真正要禁的是「触发表单提交、打开软键盘、意外聚焦」这类副作用，而非所有指针行为
- 如果只是想视觉上灰掉+不可点，优先用
disabled；但disabled会导致值不被提交，readonly才是提交场景的正确选择 -
pointer-events: none在 Safari 中对input元素支持不稳定，尤其配合readonly时容易失效
input[readonly] 如何安全禁用点击和聚焦
核心思路：保留 readonly 提交能力，用 CSS 隐藏交互反馈 + JS 拦截非预期行为。
- 加
tabindex="-1"防止键盘 Tab 进入（readonly默认仍可 tab 到） - CSS 加
user-select: none防止误选文本干扰视觉 - JS 监听
click和focus，立刻e.preventDefault()+e.target.blur() - 避免监听
mousedown：它在移动端可能拦截不到，且会破坏原生长按复制逻辑
input[readonly] {
user-select: none;
cursor: default;
}
input[readonly]:focus {
outline: none;
}
为什么不能只靠 disabled 替代 readonly
因为 disabled 字段的值不会出现在 FormData 或 form.submit() 的序列化结果里，后端收不到——这是最常踩的坑。
-
disabled适合纯展示、与表单逻辑无关的字段 -
readonly才是“用户不能改，但必须传值”的语义正确选择 - 某些 UI 库（如 Ant Design）的
disabled模式会自动移除字段名，导致后端解析失败，比原生更隐蔽 - 若强行用
disabled又想提交，得额外加隐藏域同步值，维护成本翻倍
移动端软键盘弹出问题怎么压住
iOS Safari 和部分安卓 WebView 会对 input[readonly] 点击仍唤起软键盘，这不是 bug，是浏览器认为“只读输入框也可能需要复制”。
- 必须加
onfocus="this.blur()"内联处理，CSS 无效 - 不要用
touchstart拦截：iOS 上它比focus触发早，blur 会被覆盖 - 如果用了 React/Vue，确保事件绑定在真实 DOM 节点上，别依赖虚拟 DOM 生命周期
- 测试时务必真机连 Safari 开发者工具，模拟器经常不触发该问题
复杂点在于：既要让用户能长按复制，又不能让键盘弹出。目前最稳的组合是 readonly + tabindex="-1" + onfocus="this.blur()" + user-select: none，少一个都可能在某个机型上漏掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
