readonly 属性在移动端仍会弹出键盘，因其仅阻止编辑而不阻止聚焦；ios 和部分 android 浏览器中，可聚焦的 input 点击即唤起键盘。彻底阻止需组合 readonly + tabindex="-1" + user-select: none + focus/touchstart 事件拦截 blur，或改用语义化 span/div 替代 input。
readonly 属性在移动端为什么还会弹出键盘
因为 readonly 只阻止用户编辑，不阻止聚焦；iOS 和部分 Android 浏览器中，只要 input 可聚焦（比如没加 tabindex="-1" 或没禁用 focus），点击就会唤起虚拟键盘——哪怕内容不能改。
真正阻止键盘弹出的组合方案
单靠 readonly 不够，必须配合以下至少两项：
- 加上
readonly+tabindex="-1"，让元素无法通过触摸或 Tab 进入焦点流 - 监听
touchstart和focus事件，立即blur()并preventDefault() - 对 iOS，还需加
user-select: none和-webkit-user-select: none，防止长按触发选择/键盘
示例 HTML：
<input type="text" value="只读内容" readonly tabindex="-1" style="user-select: none; -webkit-user-select: none;">再配 JS：
const el = document.querySelector('input[readonly]');<br>el.addEventListener('focus', e => {<br> e.preventDefault();<br> el.blur();<br>});<br>el.addEventListener('touchstart', e => {<br> e.preventDefault();<br>});
比 readonly 更彻底的替代写法
如果只是展示文本、完全不需要输入行为，直接换用 <span></span> 或 <div>，再用 CSS 模拟 input 样式。这样从语义和 DOM 行为上就彻底规避了键盘问题。
<ul>
<li>避免用 <code>input 标签做只读展示——这是最常被忽略的设计误用
name 值上传），可用 <input type="hidden"> 配合旁边只读文本容器v-model 绑定 readonly 输入框，记得同时加 @focus.prevent 和 @touchstart.prevent
Android 键盘残留问题特别处理
部分 Android 厂商定制系统（如小米、华为）即使 blur 了，仍可能因历史焦点残留弹出键盘。这时要额外清空焦点管理：
- 在 blur 后加
document.activeElement?.blur() - 页面加载后主动执行一次
document.body.focus()，把焦点归还给 body - 避免在
body上设tabindex，否则可能引发循环聚焦
真正麻烦的不是 readonly 本身，而是不同机型对“可聚焦”的判定逻辑差异太大——别指望一个属性解决所有设备。
