ios safari中readonly属性无效，需用focus事件中settimeout加blur()兜底；inputmode="none"仅type="text"时有效；长按和光标拖动需oncontextmenu与selectionchange双重拦截。
readonly 属性在 iOS Safari 中根本无效
很多开发者以为加个 readonly 就能一劳永逸，结果上线后 iOS 用户点一下照样弹键盘。这不是你代码写错了，是 Safari 对 readonly 的实现逻辑不同：它只检查元素是否「可编辑」，而 readonly 并不改变 contenteditable 或输入能力判定。尤其在 iOS 16+ 上，只要 type="text" 或 type="number"，且没被显式禁用交互，focus 就会触发键盘。
focus 时立刻 blur 是目前最稳的兜底方案
比依赖属性更底层、更跨平台的方式，是拦截焦点行为本身。核心不是“不让它聚焦”，而是“聚焦了马上取消”：
-
document.activeElement.blur()必须放在focus事件回调里，不能放click或touchstart—— 后者触发太早，浏览器还没完成焦点迁移 - 要加
setTimeout延迟执行blur()（哪怕只是0），否则部分安卓 WebView 会忽略这次调用 - 必须配合
preventDefault()防止某些内核（如微信 X5）在 focus 过程中二次唤起键盘
示例：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
input.addEventListener('focus', (e) => {
e.preventDefault();
setTimeout(() => {
document.activeElement?.blur();
}, 0);
});
inputmode="none" 要搭配 type="text" 才生效
inputmode="none" 确实是 HTML5 标准方案，但它的行为高度依赖 type 属性：
- 如果
type="number"或type="tel"，多数安卓浏览器会忽略inputmode="none" - iOS Safari 完全不支持
inputmode="none"（截至 iOS 17.6，2026 年仍无变化） - 唯一可靠组合是
type="text" inputmode="none"，且需确保没有其他属性（如pattern、min）触发浏览器的输入类型推断
真正难搞的是长按和光标拖动场景
很多人只测了点击，漏掉了两个高频破防点：
- 长按输入框 → 弹出「粘贴/选择全部」菜单的同时，iOS 会同步唤起键盘（即使已设
readonly或blur） - 用户手动拖动光标位置 → 触发
selectionchange，某些安卓 WebView 会重新评估焦点状态并补弹键盘
应对这两个情况，得加双重防护：oncontextmenu="return false" 拦截长按菜单，以及监听 selectionchange 后主动 blur()。但这会牺牲部分可访问性——比如屏幕阅读器用户可能无法精确定位光标，这点常被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
