Bootstrap 表单控件无法实现支付键盘，因其缺乏虚拟数字键盘、无法限制输入/屏蔽粘贴/禁用复制、不支持逐位聚焦与6位纯数字校验；需结合其栅格与按钮类自定义DOM结构并用JS严格控制输入行为。
为什么直接用 Bootstrap 的表单控件做不了支付键盘
Bootstrap 本身不提供虚拟数字键盘组件，form-control 或 input[type="password"] 只能触发系统软键盘，无法限制输入、屏蔽长按粘贴、禁用复制，更没法自定义布局和响应逻辑。手机端支付密码通常要求 6 位纯数字、无明文回显、逐位聚焦、支持退格，这些都得自己控制 DOM 行为。
用 Bootstrap 样式 + 自定义键盘 DOM 结构最稳妥
不用第三方插件，靠几行 HTML + 少量 JS 就能搭出符合支付场景的键盘。关键是复用 Bootstrap 的栅格和按钮类（如 btn、btn-lg、row、col），避免样式冲突或响应异常：
- 键盘容器用
<div class="row g-2"> 控制间距，列宽设为 <code>col-4实现三列等宽布局 - 数字按钮统一加
btn btn-outline-secondary，data-value="1"存数字值，不依赖innerHTML解析文本 - 删除键用
<button type="button" class="btn btn-light" data-action="delete"><i class="bi bi-backspace"></i></button>，避免type="submit"触发表单提交 - 密码显示区用
<div class="d-flex gap-1 mt-3"> 包裹 6 个 <code><span class="flex-shrink-0 bg-dark rounded-1 w-8 h-8"></span>，用 CSS 控制尺寸比input更稳JS 逻辑必须拦截所有非键盘输入路径
用户可能长按粘贴、用语音输入、切后台再回来，这些都会绕过键盘按钮。所以不能只监听按钮点击，还得：
- 给密码显示区父容器加
onpaste="return false"和oncut="return false" - 在输入过程中实时校验：
if (value.length > 6 || /[^0-9]/.test(value))立即截断或清空 - 退格键逻辑要区分：当前有值就删最后一位；全空时 focus 到上一位（需维护当前光标位置索引）
- 输满 6 位后，立刻
blur()所有输入相关元素，防止软键盘残留
示例关键判断：
if (target.hasAttribute('data-action') && target.dataset.action === 'delete')比target.textContent === '删除'更可靠。移动端真机测试时容易漏掉的三个点
iOS Safari 和 Android Chrome 对
input聚焦、preventDefault、CSS 缩放的处理差异很大，以下必须实测：-
touchstart代替click绑定事件，避免 iOS 300ms 延迟导致连点失效 - 键盘区域外点击要收起软键盘：
document.addEventListener('touchend', e => { if (!e.target.closest('.pay-keyboard')) input.blur(); }) - 某些安卓机型会把
height: 8px渲染成 0，改用min-height或padding配合line-height保高度
别信模拟器——真机连按 5 次删除键、横竖屏切换、切微信再切回来，这几个操作一试一个准。
- 给密码显示区父容器加
