移动端金融安全键盘需防脚本、防泄露、防错位，依赖html结构、viewport控制与输入干预协同；禁用input，用div+自定义键盘+fisher-yates随机布局；viewport须设height=device-height且禁user-scalable=no；焦点时即时scrollintoview。

移动端金融页面的安全键盘交互，核心不是“防用户”，而是防自动化脚本+防输入泄露+防布局错位。它需要 HTML 结构、viewport 控制、输入行为干预三者协同，缺一不可。

用 div 模拟输入框，彻底隔离原生键盘

金融场景（如密码、金额、验证码）必须放弃 <input> 直接暴露。正确做法是：

• 用 <div contenteditable="false"> 或纯 <code><div> 做显示容器，禁用所有文本操作<li>自定义数字键盘用 <code><button></button> 构建，每个按钮只设 data-value，不写可见字符
• 真实字符通过 CSS ::before + content 注入，配合 pointer-events: none 防止复制和选中
• 禁用右键与文本选择：user-select: none; -webkit-user-select: none;

键盘布局必须动态随机，且不可预测

静态键盘等于明文映射，极易被自动化工具识别。安全洗牌需满足：


html-to-pptx
将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。
下载
• 不用 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 冻结背景，键盘收起后务必手动移除，否则滚动/点击持续失效