移动端金融安全键盘需防脚本、防泄露、防错位，依赖HTML结构、viewport控制与输入干预协同；禁用input，用div+自定义键盘+Fisher-Yates随机布局；viewport须设height=device-height且禁user-scalable=no；焦点时即时scrollIntoView。
移动端金融页面的安全键盘交互，核心不是“防用户”，而是防自动化脚本+防输入泄露+防布局错位。它需要 HTML 结构、viewport 控制、输入行为干预三者协同，缺一不可。
用 div 模拟输入框，彻底隔离原生键盘
金融场景（如密码、金额、验证码）必须放弃 <input> 直接暴露。正确做法是：
- 用
<div contenteditable="false">或纯<div>做显示容器，禁用所有文本操作 - 自定义数字键盘用
<button>构建，每个按钮只设data-value，不写可见字符 - 真实字符通过 CSS
::before+content注入，配合pointer-events: none防止复制和选中 - 禁用右键与文本选择：
user-select: none; -webkit-user-select: none;
键盘布局必须动态随机，且不可预测
静态键盘等于明文映射，极易被自动化工具识别。安全洗牌需满足：
- 不用
Math.random() - 0.5排序——浏览器排序算法不同，结果不可控 - 采用 Fisher-Yates 算法预生成固定数组（如 0–9、←、.、确认），再批量渲染
- 每次加载生成 3–5 组键盘容器，仅激活一个，其余
display: none - 按键尺寸统一设为
min-width: 48px; min-height: 48px，确保触摸目标合规
viewport 设置必须精准，否则软键盘会破坏滚动锚点
金融页面常含滚动区域和固定操作栏，键盘弹出时若 viewport 失效，光标就会被遮挡或错位：
立即学习“前端免费学习笔记（深入）”；
- 必须写
height=device-height（不是固定值），iOS Safari 才能触发visualViewport.resize - 严禁
user-scalable=no——它会静默禁用键盘弹出时的 viewport 重绘，导致visualViewport.height永远不变 - 正确写法：
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> - 搭配
env(safe-area-inset-bottom)做底部 padding，避免 Home Indicator 遮挡确认按钮
焦点与滚动必须在 focus 事件内即时处理
不能等 resize 或 keyboardshow，时机一过，滚动就失效：
- 监听输入区域的
focus事件（不是click或focusin） - 立即调用
scrollIntoView({ block: 'nearest', inline: 'nearest' })，iOS 在键盘弹出前触发，Android 在弹出后但已足够 - 避免使用
block: 'center'——它可能把光标顶出视口顶部，反而更难操作 - 若页面有
inert冻结背景，键盘收起后务必手动移除，否则滚动/点击持续失效
