readonly 属性仅禁止编辑但允许聚焦和光标显示，ios 和部分安卓 webview 中点击仍会唤起软键盘；onfocus="this.blur()" 是最直接有效的解决方案，兼顾兼容性与表单值提交。
readonly 属性本身不阻止聚焦，只禁止编辑；光标仍会出现在 iOS 和部分安卓 WebView 中——这不是 bug，是浏览器默认行为。
为什么 readonly 不能阻止光标出现
readonly 的语义是“用户不可编辑，但可聚焦、可选中、可复制”，浏览器（尤其是 iOS Safari）认为只读输入框仍有交互价值，比如长按复制内容。所以即使加了 readonly，点击后仍会唤起软键盘、显示光标。
-
readonly不影响tabindex，元素仍能被键盘聚焦 - 移动端对
readonly的实现更宽松，尤其在旧版 WebKit 内核中 - CSS 的
user-select: none或pointer-events: none无法覆盖原生聚焦逻辑
onfocus="this.blur()" 是最直接的解决方式
在聚焦瞬间强制失焦，能有效压住光标和软键盘，兼容性好，无 polyfill 依赖。
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 写法必须是内联事件：
onfocus="this.blur()"，不要用onfocuse（拼写错误） - 避免在 JS 中重复绑定 focus 事件再调
blur()，容易触发多次或失效（尤其 React/Vue 的事件代理场景） - 如果用了框架，推荐在 mounted 或 useEffect 里统一设
el.addEventListener('focus', e => e.target.blur())，比内联更可控 - 注意：该方式不影响表单提交，
value仍会随FormData发出
disabled 虽然彻底禁用，但常引发后端接收问题
加 disabled 确实能完全阻止聚焦、光标和软键盘，但它会让字段值从表单序列化中消失——后端收不到这个字段。
-
disabled字段不会出现在form.submit()的 URL 查询参数里 -
new FormData(form)中也完全不包含disabled的input - 若强行用
disabled又想传值，得额外加一个<input type="hidden">同步 value，维护成本高且易错 - 视觉上自动灰化，若需保持原有样式，还得重置
color、opacity等，不如readonly+blur()干净
iOS 下还需补充 unselectable 和 CSS 防止误触
仅靠 onfocus="this.blur()" 在某些 iOS 版本中仍可能因快速点击或长按触发光标闪现，建议叠加防护。
- 加上
unselectable="on"（IE/Edge 传统属性，iOS Safari 也识别） - CSS 补充：
input[readonly] { user-select: none; cursor: default; } - 移除焦点轮廓：
input[readonly]:focus { outline: none; }，避免视觉残留 - 不要用
pointer-events: none，它会阻断所有事件（包括父级 click），影响弹层、日期选择器等交互
真正要的是“用户点不动、光标不闪、值还传得过去”，readonly + onfocus="this.blur()" 是目前最轻量、最可靠的组合；任何试图绕过 DOM 事件流的方案（比如监听 touchstart 后 preventDefault）都容易在不同机型上失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
