触摸屏 input 失焦是因父容器 touchstart 未阻止默认行为；ios 数字键盘需 type="number" 且 inputmode="decimal"；checkbox label 需 ≥44×44px 可触区；表单提交须 e.preventdefault() 或 button type="button"。
触摸屏上 input 失去焦点太快怎么办
触摸屏点击 input 后光标闪一下就消失，根本打不了字——这不是浏览器 bug，是移动端默认行为：某些 Android 浏览器（尤其旧版 WebView）在 focus() 后立刻触发 blur()，常因父容器监听了 touchstart 且没阻止默认行为或冒泡导致。
- 检查所有包裹
input的父级元素是否绑了touchstart或touchend，加e.preventDefault()和e.stopPropagation() - 避免给
input父容器设cursor: pointer或ontouchstart=""这类隐式触发 - 真要兼容老 WebView，可在
input上加readonly，点击时再用 JS 移除并focus()
type="number" 在 iOS 上弹不出数字键盘
iOS Safari 对 type="number" 的键盘触发很挑剔：它只认 inputmode="decimal" 或 pattern="[0-9]*" 配合才稳定唤起数字键盘；纯靠 type 值容易回落成全键盘。
- 必须同时写
<input type="number" inputmode="decimal">，inputmode是关键 - 如果允许小数，
step="0.01"比step="any"更可靠；iOS 不识别step="any" - 别依赖
pattern做校验——它不阻止输入，只影响键盘类型；校验仍需 JS 或min/max
触摸目标太小，点不准 label 或 checkbox
用户手指点 label 文字没反应，或 checkbox 小方框总点空——不是样式问题，是 CSS 触摸热区未达标。苹果和安卓都要求最小可触区域 ≥ 44×44px，而默认 checkbox 只有 16×16px。
- 给
label加padding: 12px或明确设min-height: 44px，确保整个标签可点 - 用
transform: scale(1.5)放大input[type="checkbox"]本身会失真，推荐用伪元素重绘 +pointer-events: none配合 - 别把
label和input拆开写；必须用for属性或嵌套结构，否则点击无绑定
表单提交后页面闪一下就回滚，触摸操作中断
点「提交」按钮瞬间页面跳动、输入框清空、滚动回到顶部——常见于未阻止默认行为，或用了 button 但没设 type="button"，被当成 submit 触发了整页刷新。
立即学习“前端免费学习笔记（深入）”；
- 表单内非提交按钮务必写
<button type="button"></button>，否则默认是submit - JS 提交时，事件回调里第一行必须是
e.preventDefault()，不能只靠return false - 避免在
form标签上直接写onsubmit="xxx()"，改用addEventListener('submit', ...)方便控制
触摸交互的坑不在逻辑多复杂，而在那些「看起来不该出问题」的地方：一个没加 preventDefault() 的 touchstart、一个漏写的 type="button"、或者 iOS 对 inputmode 的死板要求——这些细节卡住，用户连第一个字符都输不进去。
