移动端表单卡顿等问题源于未正确使用原生属性：用inputmode优先控制软键盘类型，避免type=”number”滥用；聚焦时通过fixed定位防错位；autocomplete需语义准确；viewport禁用user-scalable=no以保可访问性；注意inputmode在旧版ios的兼容性断层。
移动端表单卡顿、输入框失焦、键盘弹起后遮挡输入内容——这些问题不是 html5 不支持，而是没用对原生属性和事件机制。
用 inputmode 和 type 精准控制软键盘类型
单纯靠 type="text" 会让 iOS/android 都弹出全键盘，而用户可能只需要数字或邮箱。浏览器根据 type 和 inputmode 组合决定键盘布局，优先级： inputmode > type。
-
type="tel"+inputmode="numeric"：确保数字键盘（iOS 更可靠） -
type="email"自带 @ 和 . 键，但 Android 有时仍出全键盘，补inputmode="email"更稳 -
inputmode="search"在部分安卓机上能触发搜索栏样式（带「搜索」按钮） - 避免滥用
type="number"：它会强制校验、增加上下箭头、在 safari 中无法粘贴，纯数字输入建议用type="text" inputmode="numeric"
阻止默认滚动行为防止键盘弹起时页面错位
iOS Safari 键盘弹出时会尝试将 input 滚到可视区，但若父容器有 overflow: hidden 或固定定位，常导致输入框被顶出视口、光标消失。
- 监听
focus事件，在input获取焦点瞬间，临时给body加position: fixed; top: -${window.scrollY}px，失焦后再恢复 - 更轻量做法：对表单容器加
scroll-behavior: smooth，并确保其父级不设transform（会创建新层叠上下文，干扰滚动定位） - 绝对不要用
Event.preventDefault()拦截focus或touchstart——这会导致输入框完全无法聚焦
用 autocomplete 减少重复输入，但别填错值
浏览器自动填充依赖 autocomplete 值的语义准确性。填错不仅无效，还可能触发错误联想（如把「手机号」填成 autocomplete="email"）。
立即学习“前端免费学习笔记（深入）”；
- 姓名：用
autocomplete="name"（不是"full-name"） - 手机号：必须用
autocomplete="tel"；"tel-national"或"tel-local"无实际效果 - 地址行：用
autocomplete="address-line1"，而非"street-address"（后者是整段地址） - 密码字段必须成对出现：
type="password"+autocomplete="current-password"（登录）或"new-password"（注册），否则 chrome 可能拒绝保存
禁用缩放但保留可访问性
为防误操作加 user-scalable=no 是常见误区，它会直接禁用双指缩放，影响低视力用户。正确做法是限制最小缩放，而非彻底关闭。
- meta viewport 应写为：
- 避免
user-scalable=no：iOS 14+ 已将其忽略，但旧版 Android 仍会生效，造成可访问性断裂 - 如果真需禁用缩放（如游戏内表单），请同时提供文字大小调节按钮，并用
rem或clamp()保证字体随系统设置响应
最常被忽略的是 inputmode 的兼容性断层：Chrome 76+、Safari 16.4+、firefox 110+ 才完整支持，旧版 iOS 必须靠 type 回退。别只测最新版模拟器，真机连 iOS 15.7 都还在大量流通。