简介面向移动端微信支付页面开发这份代码资源针对手机端金额输入场景提供一套基于HTML5的自定义键盘交互方案能帮助前端开发者减少重复造轮子快速实现金额键盘输入、校验与展示适合具备基础HTML/CSS/JavaScript知识的入门到中级工程师直接参考。资源包为zip压缩格式共5个文件包含2个HTML页面、1个jQuery库文件、1个说明文本及1个网址快捷方式大小仅33KB结构精简、易部署可直接在浏览器或打包进WebView运行。目前已有1555人学习或下载该包具备一定实践参考热度。文件中的HTML页面演示了完整金额键盘输入流程说明文档补充了使用要点读者既能了解页面布局和事件绑定思路也能根据自身项目需求修改样式或逻辑适合用于微信H5支付页面快速搭建或学习移动端输入交互设计。1. 项目概述1.1 核心需求解析这个项目的技术关键词拆开来看非常清晰HTML5 页面、微信支付场景、键盘输入金额、可运行的代码。说白了这就是一个非常典型的移动端 H5 收银台页面——用户进来之后输入想要支付的金额点击确认后拉起微信支付。我在做类似需求的时候发现这类页面远没有想象中那么简单。表面看只是一个输入框加一个按钮但实际做起来要处理的问题不少键盘样式在不同手机上的兼容性、输入金额的格式校验两位小数、首位不为0、支付金额的精度问题还有最关键的一点——微信内置浏览器的页面弹层遮挡问题。做好一个支付页面并不难但要做对、做稳其实是有一堆实测经验在里面的。本文会把整个页面的实现思路、金额格式化逻辑、键盘输入组件以及对接微信支付时的数据处理都完整拆给你看提供一套能直接拿去用的代码实现。适合谁参考正在做微信端 H5 支付页面的前端开发、需要快速实现收银台功能的小程序/H5 项目开发者以及做网页设计作业带支付演示功能的同学。项目不依赖任何框架原生 JS 就能跑拿过去改改就能用。1.2 为什么不用系统输入法要自己写键盘我先说结论支付页面的金额输入强烈建议用自己实现的模拟键盘而不是直接调起系统输入法。原因我一个个讲。第一系统输入法在部分安卓机型上弹起后会把页面顶上去或者压变形尤其是页面里有固定定位的按钮时视觉上会出现按钮被键盘顶到屏幕外这种尴尬场面。虽然可以通过 window.innerHeight 的变化做适配但引擎千奇百怪处理起来要写一堆兼容代码。第二支付场景下金额输入有严格的格式约束第一位不能是 0、最多两位小数、金额上限限制。如果用系统输入法你得监听 input 事件去做过滤和格式化输入法的拼音联想、表情键还会给你捣乱——用户不小心点个空格你那校验逻辑可能就要报错。第三微信浏览器内的键盘弹起事件在各平台的表现不一致。在 iOS 上input 聚焦时页面滚动会受到影响在安卓某些 WebView 内核里键盘从底部弹起的动画和 CSS fixed 定位有冲突。在支付这种对体验要求高的场景里自己做一个数字键盘整个交互完全可控样式也统一同时还能提前过滤掉大量非法输入。说到底这就是一个用可控代码换无限兼容的思路做项目做多了你会明白凡是在支付、表单这种关键路径上把控制权握在自己手里永远是最稳妥的方案。2. 支付金额的数据处理逻辑2.1 金额输入的数据模型定义金额输入这个交互很多人一上来就直接拿 String 存然后往 input 的 value 里塞。这样做能跑但后面做校验和格式化时会很痛苦各种字符串拼接、截断、正则替换会让你怀疑人生。我的做法是把金额输入抽象成两个字段{ yuan: 0, // 元部分整数 fen: 0 // 分部分0-99 }但在实际键盘输入场景里用户是按位输入数字的更合理的做法是直接用字符串来记录所有按下的数字再根据当前光标位置做格式转换。let inputAmount ; // 原始数字串例如 520 表示用户依次按了 5、2、0 let isInputtingDecimal false; // 当前是否在小数输入状态 let displayAmount 0.00; // 显示在页面上的金额 // 核心将输入串转换为带两位小数的金额格式 function formatAmountToDisplay(raw) { if (!raw) return 0.00; let digits raw.replace(/[^\d]/g, ); while (digits.length 3) { digits 0 digits; } return digits.slice(0, -2) . digits.slice(-2); }这里有个很关键的思路转换用户按下的键不直接拼接到显示字符串上而是先进入一个数字缓冲区再由格式化函数统一输出。这样做的好处是无论用户按多少次小数点、删除键怎么操作最终展示的永远是符合规范的格式不会出现 0.0.1 这种脏数据。2.2 格式化与校验规则支付金额的校验规则代码上一共就那么几条但每一条都有业务背景在里面金额必须大于 0用户不能输入 0 或者空值去支付不能超过业务上限这个根据场景自己定常见的是单笔 50000 元有的渠道限制 5 万有的限制 10 万最多精确到分也就是两个小数位那么如何判断用户输入是否合法呢核心是计算当前金额元是否在合法区间内function getAmountInYuan(raw) { let digits raw.replace(/[^\d]/g, ); while (digits.length 3) { digits 0 digits; } return parseFloat(digits.slice(0, -2) . digits.slice(-2));; } function isAmountValid(yuan) { if (isNaN(yuan) || yuan 0) return false; if (yuan 50000) return false; return true; }这块的逻辑不复杂但有一个细节容易被忽略在小数点还没输入的时候用户按下的数字是原始输入此时要先做预判防止用户输入超纲。比如用户想输入 52000 元按到 5 万的时候已经 5 位数了第 6 位按不下去了这种按键无效的反馈得做出来页面上的键盘要有轻微抖动或者按钮置灰的反馈告诉用户这笔金额太大了。我前面踩过一个坑用户输入到上限时按钮没做禁用反馈白按了好多下才意识到不能输更大金额体验很不好。后来我把格式化函数和上限判断统一到一个方法里键盘按下的瞬间就同步更新键盘可用状态这个问题就解决了。3. 自定义数字键盘的完整实现3.1 键盘的 HTML 与 CSS 结构这里我给出一套完整的实现代码。整个键盘的标记语言结构是九宫格数字1-9 底部一排0、小数点、删除键。为什么 0 不放在九宫格里而单独放在最后一行因为用户在输入金额时0 的使用频率高单独放大按键可以减少误触这个布局也是微信支付官方收银台的经典排布。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno title微信支付 - 金额输入/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Helvetica Neue, sans-serif; background: #f5f5f5; height: 100vh; overflow: hidden; } .page-container { display: flex; flex-direction: column; height: 100%; } /* 顶部收银台信息 */ .header { background: linear-gradient(135deg, #07c160 0%, #06ad56 100%); padding: 24px 20px; color: #fff; text-align: center; } .header .merchant-name { font-size: 14px; opacity: 0.85; margin-bottom: 12px; } .header .amount-display { font-size: 34px; font-weight: 600; font-family: DIN Alternate, Helvetica Neue, sans-serif; letter-spacing: 1px; } .header .amount-display span { font-size: 22px; margin-right: 4px; font-weight: 500; } .content { flex: 1; padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* 自定义键盘容器 */ .custom-keyboard { background: #f9f9f9; border-top: 1px solid #ddd; padding: 8px 0 calc(8px env(safe-area-inset-bottom)); user-select: none; -webkit-user-select: none; } .key-row { display: flex; padding: 4px 8px; } .key { flex: 1; height: 48px; margin: 3px; border-radius: 8px; background: #fff; border: none; font-size: 24px; font-weight: 500; color: #333; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,0.08); transition: background 0.1s; } .key:active { background: #e8e8e8; transform: scale(0.97); } .key.key-delete { background: #ececec; font-size: 20px; color: #888; } .key.key-disabled { opacity: 0.4; pointer-events: none; } .pay-btn { margin: 20px 16px; height: 48px; border: none; border-radius: 24px; background: #07c160; color: #fff; font-size: 17px; font-weight: 600; cursor: pointer; width: calc(100% - 32px); letter-spacing: 2px; } .pay-btn:disabled { background: #a0d8b8; cursor: not-allowed; } /style /head body div classpage-container div classheader div classmerchant-name我的小店/div div classamount-display idamountDisplay¥ span idamountValue0.00/span/div /div div classcontent div stylefont-size: 14px; color: #999; text-align: center; padding-top: 10px; 请输入消费金额单笔最高 50000.00 元 /div /div button classpay-btn idpayBtn disabled微信支付/button !-- 自定义数字键盘 -- div classcustom-keyboard idcustomKeyboard div classkey-row button classkey>let rawAmount ; // 原始数字串 let decimalEntered false; // 是否已经按过小数点 let MAX_AMOUNT 50000; // 单笔上限 50000 元 const amountValueEl document.getElementById(amountValue); const payBtn document.getElementById(payBtn); const dotKey document.getElementById(dotKey); // 按键核心逻辑 function handleKeyPress(key) { if (key 0 key 9) { // 处理整数部分长度限制不能超过 7 位50000.00 整数部分最大 5 位 let intPart decimalEntered ? rawAmount.split(.)[0] : rawAmount; if (intPart.length 5 !decimalEntered) { // 整数部分已经5位如果此时后面还有小数则允许否则拒绝 if (rawAmount.length 5) { rawAmount key; } else { return; // 超出可输入长度 } } else if (intPart.length 5 decimalEntered) { return; // 整数部分5位已达上限不能再增加任何整数位 } else { rawAmount key; } } else if (key .) { if (decimalEntered) return; // 已有小数点忽略 if (rawAmount ) return; // 第一位不能是小数点 decimalEntered true; rawAmount .; } else if (key delete) { if (rawAmount.length 0) { let removed rawAmount[rawAmount.length - 1]; rawAmount rawAmount.slice(0, -1); if (removed .) decimalEntered false; } } updateDisplay(); } // 格式化显示并同步按钮状态 function updateDisplay() { let yuan parseAmount(rawAmount); amountValueEl.textContent yuan.toFixed(2); // 检查是否可以支付 let isValid yuan 0 yuan MAX_AMOUNT; payBtn.disabled !isValid; // 金额达到上限时把小数点按钮禁用防止继续输入小数位 let amountLimitReached Math.floor(yuan) MAX_AMOUNT; if (amountLimitReached) { dotKey.classList.add(key-disabled); } else { dotKey.classList.remove(key-disabled); } } // 将输入串解析为数字金额 function parseAmount(input) { if (!input) return 0; // 去除非数字和小数点以外的字符 let cleaned input.replace(/[^\d.]/g, ); // 按小数点分割 let parts cleaned.split(.); let intPart parseInt(parts[0] || 0, 10); let fracPart parts.length 1 ? (parts[1] 00).slice(0, 2).padEnd(2, 0) : 00; let yuan parseFloat(intPart . fracPart); return yuan; } // 事件绑定 document.querySelectorAll(.key).forEach(btn { btn.addEventListener(click, () { let key btn.dataset.key; if (key delete) { handleKeyPress(delete); } else { handleKeyPress(key); } }); }); // 删除键长按清空体验增强 let deleteTimer null; const deleteKey document.getElementById(deleteKey); deleteKey.addEventListener(mousedown, () { deleteTimer setTimeout(() { rawAmount ; decimalEntered false; updateDisplay(); }, 800); }); deleteKey.addEventListener(mouseup, () clearTimeout(deleteTimer)); deleteKey.addEventListener(mouseleave, () clearTimeout(deleteTimer));这段代码里我特意写了一个小数点按钮的动态禁用逻辑当整数部分已经达到上限金额这里是 50000时小数点按钮自动置灰用户就无法继续往分位输小数了这在真实支付场景里是一个很人性化的细节。还有一个细节删除键的长按清空。支付场景下用户输错了金额按一下删一位太痛苦长按直接清空是很好的体验我用一个 800ms 的定时器实现的。但注意要处理 mouseup 和 mouseleave 两个事件不然鼠标移出按钮后定时器还在跑会误触发清空。3.3 触屏事件与抖动反馈移动端触屏的事件绑定用 click 在大多数情况下够用但如果你想追求更好的响应速度可以换成 touchstart。不过 touchstart 有个副作用用户滑动时如果恰好在某个按键上按下也会触发。所以更稳妥的做法是用 click 配合 CSS 的 :active 状态做视觉反馈。抖动反馈的实现我放在按键超出限制时。举个例子用户已经输入了 50000再按任意数字键时键盘整体做一个轻微的左右震动动画提示用户输入无效keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } .keyboard-shake { animation: shake 0.2s ease-in-out; }function triggerShake() { const kb document.getElementById(customKeyboard); kb.classList.remove(keyboard-shake); void kb.offsetWidth; // 强制刷新动画 kb.classList.add(keyboard-shake); }这段 JS 里最关键的一行是void kb.offsetWidth它会强制浏览器进行一次重排让动画效果可以被重复触发。如果直接反复添加同一个 class浏览器会认为动画已经在播放不会重新触发。这个技巧在处理重复抖动的同一元素时非常常用一定记住。4. 对接微信支付的金额处理4.1 前端向订单接口传递金额的正确方式页面本身把金额显示和交互做对了接下来就是怎么把这个金额传给后端让后端去调微信支付接口下单。这里有一个非常经典的坑金额单位的确认。微信支付 API 的金额单位是分整数不是元。Java 后端、PHP 后端、Node 后端我都对接过凡是直接传元给微信的不是报金额无效就是被微信侧拦截。所以前端把订单信息传给后端时建议直接传分值整数让后端少做一次转换也避免类型判断的模棱两可。function getAmountInFen() { let yuan parseAmount(rawAmount); // 重点不能直接 yuan * 100因为浮点精度问题 return Math.round(yuan * 100); }为什么不能直接乘 100 因为 JS 的浮点计算存在精度丢失问题比如0.29 * 100的结果是28.999999999999996如果直接传给后端到账金额就是 28 分而不是 29 分。所以这里必须用Math.round做四舍五入取整。更稳妥的方法是纯粹用字符串解析function getAmountInFenSafe() { let cleaned rawAmount.replace(/[^\d.]/g, ); if (!cleaned) return 0; let parts cleaned.split(.); let intPart parts[0] || 0; let fracPart (parts[1] || ).padEnd(2, 0).slice(0, 2); return parseInt(intPart, 10) * 100 parseInt(fracPart, 10); }这种字符串转整数的方式完全避开浮点计算从源头杜绝精度问题。在做支付系统时能用整数运算就不要用浮点运算这条经验放之四海皆准。4.2 微信内内置浏览器拦截处理当页面跑在微信内置浏览器WeChat WebView中时还有一个需要注意的点微信在 7.0.4 以上版本中对 H5 页面用WeixinJSBridge拉起的支付有 JS-SDK 安全域名校验。所以正常流程不是前端直接调起支付而是前端把金额传到自己的后端服务后端用商户号调用微信支付统一下单接口JSAPI 支付获取支付参数后端把appId、timeStamp、nonceStr、package、signType、paySign等参数返回给前端前端在这些参数齐备后调用WeixinJSBridge.invoke(getBrandWCPayRequest, {...})拉起微信支付这里我不展开后端签名细节因为不同技术栈的后端写法不一样只给前端拉起支付的完整代码function onPayButtonClick() { const fen getAmountInFenSafe(); // 1. 请求自己的服务端下单接口 fetch(/api/pay/createOrder, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ amount: fen, orderId: generateOrderId() }) }) .then(res res.json()) .then(data { if (data.code 0) { // 2. 调用微信支付 if (typeof WeixinJSBridge undefined) { alert(当前环境不支持微信支付请使用微信客户端打开); return; } WeixinJSBridge.invoke(getBrandWCPayRequest, { appId: data.data.appId, timeStamp: data.data.timeStamp, nonceStr: data.data.nonceStr, package: data.data.package, signType: RSA, paySign: data.data.paySign }, function(res) { if (res.err_msg get_brand_wcpay_request:ok) { showSuccessToast(); } else { showErrorToast(res.err_msg); } }); } else { showErrorToast(data.msg); } }) .catch(err { showErrorToast(网络错误请稍后重试); }); } payBtn.addEventListener(click, onPayButtonClick);这里有个容易踩坑的点后端给的package参数的值已经带prepay_id前缀了前端直接透传即可不要自己拼。很多新手会在这里反过来再拼一层prepay_id导致签名验证失败。4.3 金额校验的二次兜底前端的所有校验都只是用户体验层面的真正落地的安全校验必须放在后端。我在实际项目里通常会在后端下单接口里再做一次金额校验至少覆盖以下规则金额分必须是正整数且在业务允许范围内金额必须与前端页面展示的一致防止有人抓包篡改请求体同一个订单号不能重复下单防止重复支付前端不管怎么传后端把它当成完全不可信的数据来对待。这也是支付系统开发最基本的安全意识。我刚入行时做过一个支付页面前端校验做了后端因为信任前端的处理结果上线当天就被人用篡改请求金额的方式刷了单幸好发现得早。从那以后我给自己立了一条规矩前端的校验是用户体验后端的校验才是真安全。5. 常见问题与排查技巧实录5.1 页面在微信中打开后键盘错位这个是我遇到最多的一个反馈。页面在普通浏览器里正常一到微信内置浏览器底部键盘和金额显示区离了一大截。排查思路微信内置浏览器对env(safe-area-inset-bottom)的支持在不同版本上有细微差异。最直接的解决办法就是在初始化时检测微信环境给键盘底部加一个固定的安全距离function detectWeChat() { const ua navigator.userAgent.toLowerCase(); return ua.indexOf(micromessenger) ! -1; } if (detectWeChat()) { document.documentElement.style.setProperty(--safe-bottom, env(safe-area-inset-bottom)); }同时在键盘的 CSS 中设置.custom-keyboard { padding-bottom: var(--safe-bottom, 10px); }这一招能解决绝大多数微信内置浏览器底部被手势条遮挡的问题。5.2 iOS 输入框聚焦导致页面顶部跳动这是 HTML5 页面的通病。iOS Safari 中点击 input 聚焦后页面会自动滚动到输入框位置把页面顶部内容挤出去在其他操作后又不自动滚回来显示区域就乱了。我自己的方案是支付页面尽量不依赖原生 input完全用自绘键盘替代原生键盘。但如果项目里确实需要用原生 input比如做搜索框可以这样处理input.addEventListener(focus, () { setTimeout(() { window.scrollTo(0, 0); }, 100); });这个setTimeout 100ms是为了等系统键盘完全弹起之后再滚动如果没有这个延时scrollTo 会被键盘弹起的行为覆盖。5.3 金额为 0 或非法时按钮不可点击很多实现里只是简单判断if (val 0) 启用按钮但没考虑 parseInt(0.00) 这种边界情况。我在 parseAmount 函数里做了一层兜底如果输入串被清理后为空直接返回 0这样isValid永远是 false按钮自然就不可用。另外还有一个隐藏问题当用户输入 0.00 但还没按下最后一位时显示为 0.00 但实际输入串是 0.0parseAmount 返回的是 0。此时按钮不可用是符合预期的用户会继续输入。但如果你不小心把 parseAmount 写成parseFloat(input.replace(/[^\d.]/g, ))遇到 0.0 会返回 0遇到空串返回 NaNNaN 比较时就是 false所以按钮失效逻辑一样成立。两种写法都行但字符串解析法更可控推荐用字符串法。5.4 常见错误速查表错误类型现象原因解决方式invalid total_fee支付时提示金额无效传入的金额单位是元微信要求分前端用字符串解析切分为整数分后传后端签名错误拉起支付时返回签名错误package 参数重复拼了 prepay_id 前缀直接透传后端返回的 package 值当前页面无法支付按钮点击无反应检测不到 WeixinJSBridge等待WeixinJSBridgeReady事件再绑定金额显示 28.99...页面金额显示多出一堆小数浮点乘法精度丢失用字符串截断替代乘法计算键盘弹起后页面错位输入时看到底层页面滚动fixed 元素在键盘弹起后的定位变化改用 flex 布局 键盘作为普通元素随文档流排布表格里第五条值得展开一下。传统写法喜欢用position: fixed; bottom: 0来固定键盘这在部分安卓 WebView 里会有问题键盘弹起时可视区域改变fixed 元素的位置会跳。改用 flex 布局键盘作为页面的最后一个普通块级元素跟着文档流放到容器底部这样不管键盘弹起还是收起布局都是一致的不会出现跳动。5.5 如何模拟微信支付环境进行测试开发时最常见的痛点是没有真实商户号怎么验证支付流程我的建议是走两条路。第一条路如果你的后端是用的微信支付 v3 接口但商户号还没申请下来可以去微信支付官方申请开发版沙箱环境。用沙箱的商户号 沙箱密钥可以在测试环境里跑通完整的回调流程体验和正式环境几乎一样。第二条路纯前端做页面演示时不真正联调微信支付接口而是模拟一个支付成功的分支。在payBtn点击后延时 1 秒弹出一个支付成功页面这主要用来验证前端交互逻辑——比如支付成功后的页面跳转、金额清零、订单状态更新等。等正式环境就绪后只需要把模拟的部分替换成真实 API 调用即可。无论如何都要注意一点千万别拿正式环境的商户号和密钥在前端代码里硬编码。曾经有项目把mchid和apiV3Key直接写在前端被人在 GitHub 上扫到了后果就是商户号被冻结。密钥这类敏感信息永远只能存在于后端配置里。6. 扩展思路项目做到这里核心的支付页面逻辑已经完整了。如果还想继续延展有两条路可以走。一是把键盘抽象成通用组件。当前的数字键盘只服务金额输入但同样的交互可以复用到手机号输入、验证码输入、邀请码输入等场景。抽象成一个独立组件后配置项包括整数位上限、小数位上限、是否允许负数、是否允许小数点、是否显示清零按钮、是否支持长按删除等一套代码通吃所有数字输入场景。二是增加收银台的业务形态。比如支持多商品结算页面上方展示购物车列表下方是应收金额用户确认后进入支付流程。这种形态下键盘输入的不再是任意金额而是锁定在购物车总额上用户只能选择确认支付而不能改金额。实际商超收银台大多是这种模式。这样支付环节更安全用户体验也更顺畅——用户不需要自己算账扫码后直接确认。我在实际项目中最常遇到的形态其实是这样既有固定金额的场景又有让用户自由输入金额的场景比如咖啡馆小费、付费社群。两种形态并存时键盘组件要支持金额锁定/解锁两种模式按下 6 位以内密码格式的校验逻辑也要抽出来共用。做好这两个模式这套代码差不多可以吃遍绝大多数 H5 收银场景了。本文还有配套的精品资源点击获取
微信支付H5收银台：自定义数字键盘与金额格式化实战
简介面向移动端微信支付页面开发这份代码资源针对手机端金额输入场景提供一套基于HTML5的自定义键盘交互方案能帮助前端开发者减少重复造轮子快速实现金额键盘输入、校验与展示适合具备基础HTML/CSS/JavaScript知识的入门到中级工程师直接参考。资源包为zip压缩格式共5个文件包含2个HTML页面、1个jQuery库文件、1个说明文本及1个网址快捷方式大小仅33KB结构精简、易部署可直接在浏览器或打包进WebView运行。目前已有1555人学习或下载该包具备一定实践参考热度。文件中的HTML页面演示了完整金额键盘输入流程说明文档补充了使用要点读者既能了解页面布局和事件绑定思路也能根据自身项目需求修改样式或逻辑适合用于微信H5支付页面快速搭建或学习移动端输入交互设计。1. 项目概述1.1 核心需求解析这个项目的技术关键词拆开来看非常清晰HTML5 页面、微信支付场景、键盘输入金额、可运行的代码。说白了这就是一个非常典型的移动端 H5 收银台页面——用户进来之后输入想要支付的金额点击确认后拉起微信支付。我在做类似需求的时候发现这类页面远没有想象中那么简单。表面看只是一个输入框加一个按钮但实际做起来要处理的问题不少键盘样式在不同手机上的兼容性、输入金额的格式校验两位小数、首位不为0、支付金额的精度问题还有最关键的一点——微信内置浏览器的页面弹层遮挡问题。做好一个支付页面并不难但要做对、做稳其实是有一堆实测经验在里面的。本文会把整个页面的实现思路、金额格式化逻辑、键盘输入组件以及对接微信支付时的数据处理都完整拆给你看提供一套能直接拿去用的代码实现。适合谁参考正在做微信端 H5 支付页面的前端开发、需要快速实现收银台功能的小程序/H5 项目开发者以及做网页设计作业带支付演示功能的同学。项目不依赖任何框架原生 JS 就能跑拿过去改改就能用。1.2 为什么不用系统输入法要自己写键盘我先说结论支付页面的金额输入强烈建议用自己实现的模拟键盘而不是直接调起系统输入法。原因我一个个讲。第一系统输入法在部分安卓机型上弹起后会把页面顶上去或者压变形尤其是页面里有固定定位的按钮时视觉上会出现按钮被键盘顶到屏幕外这种尴尬场面。虽然可以通过 window.innerHeight 的变化做适配但引擎千奇百怪处理起来要写一堆兼容代码。第二支付场景下金额输入有严格的格式约束第一位不能是 0、最多两位小数、金额上限限制。如果用系统输入法你得监听 input 事件去做过滤和格式化输入法的拼音联想、表情键还会给你捣乱——用户不小心点个空格你那校验逻辑可能就要报错。第三微信浏览器内的键盘弹起事件在各平台的表现不一致。在 iOS 上input 聚焦时页面滚动会受到影响在安卓某些 WebView 内核里键盘从底部弹起的动画和 CSS fixed 定位有冲突。在支付这种对体验要求高的场景里自己做一个数字键盘整个交互完全可控样式也统一同时还能提前过滤掉大量非法输入。说到底这就是一个用可控代码换无限兼容的思路做项目做多了你会明白凡是在支付、表单这种关键路径上把控制权握在自己手里永远是最稳妥的方案。2. 支付金额的数据处理逻辑2.1 金额输入的数据模型定义金额输入这个交互很多人一上来就直接拿 String 存然后往 input 的 value 里塞。这样做能跑但后面做校验和格式化时会很痛苦各种字符串拼接、截断、正则替换会让你怀疑人生。我的做法是把金额输入抽象成两个字段{ yuan: 0, // 元部分整数 fen: 0 // 分部分0-99 }但在实际键盘输入场景里用户是按位输入数字的更合理的做法是直接用字符串来记录所有按下的数字再根据当前光标位置做格式转换。let inputAmount ; // 原始数字串例如 520 表示用户依次按了 5、2、0 let isInputtingDecimal false; // 当前是否在小数输入状态 let displayAmount 0.00; // 显示在页面上的金额 // 核心将输入串转换为带两位小数的金额格式 function formatAmountToDisplay(raw) { if (!raw) return 0.00; let digits raw.replace(/[^\d]/g, ); while (digits.length 3) { digits 0 digits; } return digits.slice(0, -2) . digits.slice(-2); }这里有个很关键的思路转换用户按下的键不直接拼接到显示字符串上而是先进入一个数字缓冲区再由格式化函数统一输出。这样做的好处是无论用户按多少次小数点、删除键怎么操作最终展示的永远是符合规范的格式不会出现 0.0.1 这种脏数据。2.2 格式化与校验规则支付金额的校验规则代码上一共就那么几条但每一条都有业务背景在里面金额必须大于 0用户不能输入 0 或者空值去支付不能超过业务上限这个根据场景自己定常见的是单笔 50000 元有的渠道限制 5 万有的限制 10 万最多精确到分也就是两个小数位那么如何判断用户输入是否合法呢核心是计算当前金额元是否在合法区间内function getAmountInYuan(raw) { let digits raw.replace(/[^\d]/g, ); while (digits.length 3) { digits 0 digits; } return parseFloat(digits.slice(0, -2) . digits.slice(-2));; } function isAmountValid(yuan) { if (isNaN(yuan) || yuan 0) return false; if (yuan 50000) return false; return true; }这块的逻辑不复杂但有一个细节容易被忽略在小数点还没输入的时候用户按下的数字是原始输入此时要先做预判防止用户输入超纲。比如用户想输入 52000 元按到 5 万的时候已经 5 位数了第 6 位按不下去了这种按键无效的反馈得做出来页面上的键盘要有轻微抖动或者按钮置灰的反馈告诉用户这笔金额太大了。我前面踩过一个坑用户输入到上限时按钮没做禁用反馈白按了好多下才意识到不能输更大金额体验很不好。后来我把格式化函数和上限判断统一到一个方法里键盘按下的瞬间就同步更新键盘可用状态这个问题就解决了。3. 自定义数字键盘的完整实现3.1 键盘的 HTML 与 CSS 结构这里我给出一套完整的实现代码。整个键盘的标记语言结构是九宫格数字1-9 底部一排0、小数点、删除键。为什么 0 不放在九宫格里而单独放在最后一行因为用户在输入金额时0 的使用频率高单独放大按键可以减少误触这个布局也是微信支付官方收银台的经典排布。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno title微信支付 - 金额输入/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Helvetica Neue, sans-serif; background: #f5f5f5; height: 100vh; overflow: hidden; } .page-container { display: flex; flex-direction: column; height: 100%; } /* 顶部收银台信息 */ .header { background: linear-gradient(135deg, #07c160 0%, #06ad56 100%); padding: 24px 20px; color: #fff; text-align: center; } .header .merchant-name { font-size: 14px; opacity: 0.85; margin-bottom: 12px; } .header .amount-display { font-size: 34px; font-weight: 600; font-family: DIN Alternate, Helvetica Neue, sans-serif; letter-spacing: 1px; } .header .amount-display span { font-size: 22px; margin-right: 4px; font-weight: 500; } .content { flex: 1; padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* 自定义键盘容器 */ .custom-keyboard { background: #f9f9f9; border-top: 1px solid #ddd; padding: 8px 0 calc(8px env(safe-area-inset-bottom)); user-select: none; -webkit-user-select: none; } .key-row { display: flex; padding: 4px 8px; } .key { flex: 1; height: 48px; margin: 3px; border-radius: 8px; background: #fff; border: none; font-size: 24px; font-weight: 500; color: #333; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,0.08); transition: background 0.1s; } .key:active { background: #e8e8e8; transform: scale(0.97); } .key.key-delete { background: #ececec; font-size: 20px; color: #888; } .key.key-disabled { opacity: 0.4; pointer-events: none; } .pay-btn { margin: 20px 16px; height: 48px; border: none; border-radius: 24px; background: #07c160; color: #fff; font-size: 17px; font-weight: 600; cursor: pointer; width: calc(100% - 32px); letter-spacing: 2px; } .pay-btn:disabled { background: #a0d8b8; cursor: not-allowed; } /style /head body div classpage-container div classheader div classmerchant-name我的小店/div div classamount-display idamountDisplay¥ span idamountValue0.00/span/div /div div classcontent div stylefont-size: 14px; color: #999; text-align: center; padding-top: 10px; 请输入消费金额单笔最高 50000.00 元 /div /div button classpay-btn idpayBtn disabled微信支付/button !-- 自定义数字键盘 -- div classcustom-keyboard idcustomKeyboard div classkey-row button classkey>let rawAmount ; // 原始数字串 let decimalEntered false; // 是否已经按过小数点 let MAX_AMOUNT 50000; // 单笔上限 50000 元 const amountValueEl document.getElementById(amountValue); const payBtn document.getElementById(payBtn); const dotKey document.getElementById(dotKey); // 按键核心逻辑 function handleKeyPress(key) { if (key 0 key 9) { // 处理整数部分长度限制不能超过 7 位50000.00 整数部分最大 5 位 let intPart decimalEntered ? rawAmount.split(.)[0] : rawAmount; if (intPart.length 5 !decimalEntered) { // 整数部分已经5位如果此时后面还有小数则允许否则拒绝 if (rawAmount.length 5) { rawAmount key; } else { return; // 超出可输入长度 } } else if (intPart.length 5 decimalEntered) { return; // 整数部分5位已达上限不能再增加任何整数位 } else { rawAmount key; } } else if (key .) { if (decimalEntered) return; // 已有小数点忽略 if (rawAmount ) return; // 第一位不能是小数点 decimalEntered true; rawAmount .; } else if (key delete) { if (rawAmount.length 0) { let removed rawAmount[rawAmount.length - 1]; rawAmount rawAmount.slice(0, -1); if (removed .) decimalEntered false; } } updateDisplay(); } // 格式化显示并同步按钮状态 function updateDisplay() { let yuan parseAmount(rawAmount); amountValueEl.textContent yuan.toFixed(2); // 检查是否可以支付 let isValid yuan 0 yuan MAX_AMOUNT; payBtn.disabled !isValid; // 金额达到上限时把小数点按钮禁用防止继续输入小数位 let amountLimitReached Math.floor(yuan) MAX_AMOUNT; if (amountLimitReached) { dotKey.classList.add(key-disabled); } else { dotKey.classList.remove(key-disabled); } } // 将输入串解析为数字金额 function parseAmount(input) { if (!input) return 0; // 去除非数字和小数点以外的字符 let cleaned input.replace(/[^\d.]/g, ); // 按小数点分割 let parts cleaned.split(.); let intPart parseInt(parts[0] || 0, 10); let fracPart parts.length 1 ? (parts[1] 00).slice(0, 2).padEnd(2, 0) : 00; let yuan parseFloat(intPart . fracPart); return yuan; } // 事件绑定 document.querySelectorAll(.key).forEach(btn { btn.addEventListener(click, () { let key btn.dataset.key; if (key delete) { handleKeyPress(delete); } else { handleKeyPress(key); } }); }); // 删除键长按清空体验增强 let deleteTimer null; const deleteKey document.getElementById(deleteKey); deleteKey.addEventListener(mousedown, () { deleteTimer setTimeout(() { rawAmount ; decimalEntered false; updateDisplay(); }, 800); }); deleteKey.addEventListener(mouseup, () clearTimeout(deleteTimer)); deleteKey.addEventListener(mouseleave, () clearTimeout(deleteTimer));这段代码里我特意写了一个小数点按钮的动态禁用逻辑当整数部分已经达到上限金额这里是 50000时小数点按钮自动置灰用户就无法继续往分位输小数了这在真实支付场景里是一个很人性化的细节。还有一个细节删除键的长按清空。支付场景下用户输错了金额按一下删一位太痛苦长按直接清空是很好的体验我用一个 800ms 的定时器实现的。但注意要处理 mouseup 和 mouseleave 两个事件不然鼠标移出按钮后定时器还在跑会误触发清空。3.3 触屏事件与抖动反馈移动端触屏的事件绑定用 click 在大多数情况下够用但如果你想追求更好的响应速度可以换成 touchstart。不过 touchstart 有个副作用用户滑动时如果恰好在某个按键上按下也会触发。所以更稳妥的做法是用 click 配合 CSS 的 :active 状态做视觉反馈。抖动反馈的实现我放在按键超出限制时。举个例子用户已经输入了 50000再按任意数字键时键盘整体做一个轻微的左右震动动画提示用户输入无效keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } .keyboard-shake { animation: shake 0.2s ease-in-out; }function triggerShake() { const kb document.getElementById(customKeyboard); kb.classList.remove(keyboard-shake); void kb.offsetWidth; // 强制刷新动画 kb.classList.add(keyboard-shake); }这段 JS 里最关键的一行是void kb.offsetWidth它会强制浏览器进行一次重排让动画效果可以被重复触发。如果直接反复添加同一个 class浏览器会认为动画已经在播放不会重新触发。这个技巧在处理重复抖动的同一元素时非常常用一定记住。4. 对接微信支付的金额处理4.1 前端向订单接口传递金额的正确方式页面本身把金额显示和交互做对了接下来就是怎么把这个金额传给后端让后端去调微信支付接口下单。这里有一个非常经典的坑金额单位的确认。微信支付 API 的金额单位是分整数不是元。Java 后端、PHP 后端、Node 后端我都对接过凡是直接传元给微信的不是报金额无效就是被微信侧拦截。所以前端把订单信息传给后端时建议直接传分值整数让后端少做一次转换也避免类型判断的模棱两可。function getAmountInFen() { let yuan parseAmount(rawAmount); // 重点不能直接 yuan * 100因为浮点精度问题 return Math.round(yuan * 100); }为什么不能直接乘 100 因为 JS 的浮点计算存在精度丢失问题比如0.29 * 100的结果是28.999999999999996如果直接传给后端到账金额就是 28 分而不是 29 分。所以这里必须用Math.round做四舍五入取整。更稳妥的方法是纯粹用字符串解析function getAmountInFenSafe() { let cleaned rawAmount.replace(/[^\d.]/g, ); if (!cleaned) return 0; let parts cleaned.split(.); let intPart parts[0] || 0; let fracPart (parts[1] || ).padEnd(2, 0).slice(0, 2); return parseInt(intPart, 10) * 100 parseInt(fracPart, 10); }这种字符串转整数的方式完全避开浮点计算从源头杜绝精度问题。在做支付系统时能用整数运算就不要用浮点运算这条经验放之四海皆准。4.2 微信内内置浏览器拦截处理当页面跑在微信内置浏览器WeChat WebView中时还有一个需要注意的点微信在 7.0.4 以上版本中对 H5 页面用WeixinJSBridge拉起的支付有 JS-SDK 安全域名校验。所以正常流程不是前端直接调起支付而是前端把金额传到自己的后端服务后端用商户号调用微信支付统一下单接口JSAPI 支付获取支付参数后端把appId、timeStamp、nonceStr、package、signType、paySign等参数返回给前端前端在这些参数齐备后调用WeixinJSBridge.invoke(getBrandWCPayRequest, {...})拉起微信支付这里我不展开后端签名细节因为不同技术栈的后端写法不一样只给前端拉起支付的完整代码function onPayButtonClick() { const fen getAmountInFenSafe(); // 1. 请求自己的服务端下单接口 fetch(/api/pay/createOrder, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ amount: fen, orderId: generateOrderId() }) }) .then(res res.json()) .then(data { if (data.code 0) { // 2. 调用微信支付 if (typeof WeixinJSBridge undefined) { alert(当前环境不支持微信支付请使用微信客户端打开); return; } WeixinJSBridge.invoke(getBrandWCPayRequest, { appId: data.data.appId, timeStamp: data.data.timeStamp, nonceStr: data.data.nonceStr, package: data.data.package, signType: RSA, paySign: data.data.paySign }, function(res) { if (res.err_msg get_brand_wcpay_request:ok) { showSuccessToast(); } else { showErrorToast(res.err_msg); } }); } else { showErrorToast(data.msg); } }) .catch(err { showErrorToast(网络错误请稍后重试); }); } payBtn.addEventListener(click, onPayButtonClick);这里有个容易踩坑的点后端给的package参数的值已经带prepay_id前缀了前端直接透传即可不要自己拼。很多新手会在这里反过来再拼一层prepay_id导致签名验证失败。4.3 金额校验的二次兜底前端的所有校验都只是用户体验层面的真正落地的安全校验必须放在后端。我在实际项目里通常会在后端下单接口里再做一次金额校验至少覆盖以下规则金额分必须是正整数且在业务允许范围内金额必须与前端页面展示的一致防止有人抓包篡改请求体同一个订单号不能重复下单防止重复支付前端不管怎么传后端把它当成完全不可信的数据来对待。这也是支付系统开发最基本的安全意识。我刚入行时做过一个支付页面前端校验做了后端因为信任前端的处理结果上线当天就被人用篡改请求金额的方式刷了单幸好发现得早。从那以后我给自己立了一条规矩前端的校验是用户体验后端的校验才是真安全。5. 常见问题与排查技巧实录5.1 页面在微信中打开后键盘错位这个是我遇到最多的一个反馈。页面在普通浏览器里正常一到微信内置浏览器底部键盘和金额显示区离了一大截。排查思路微信内置浏览器对env(safe-area-inset-bottom)的支持在不同版本上有细微差异。最直接的解决办法就是在初始化时检测微信环境给键盘底部加一个固定的安全距离function detectWeChat() { const ua navigator.userAgent.toLowerCase(); return ua.indexOf(micromessenger) ! -1; } if (detectWeChat()) { document.documentElement.style.setProperty(--safe-bottom, env(safe-area-inset-bottom)); }同时在键盘的 CSS 中设置.custom-keyboard { padding-bottom: var(--safe-bottom, 10px); }这一招能解决绝大多数微信内置浏览器底部被手势条遮挡的问题。5.2 iOS 输入框聚焦导致页面顶部跳动这是 HTML5 页面的通病。iOS Safari 中点击 input 聚焦后页面会自动滚动到输入框位置把页面顶部内容挤出去在其他操作后又不自动滚回来显示区域就乱了。我自己的方案是支付页面尽量不依赖原生 input完全用自绘键盘替代原生键盘。但如果项目里确实需要用原生 input比如做搜索框可以这样处理input.addEventListener(focus, () { setTimeout(() { window.scrollTo(0, 0); }, 100); });这个setTimeout 100ms是为了等系统键盘完全弹起之后再滚动如果没有这个延时scrollTo 会被键盘弹起的行为覆盖。5.3 金额为 0 或非法时按钮不可点击很多实现里只是简单判断if (val 0) 启用按钮但没考虑 parseInt(0.00) 这种边界情况。我在 parseAmount 函数里做了一层兜底如果输入串被清理后为空直接返回 0这样isValid永远是 false按钮自然就不可用。另外还有一个隐藏问题当用户输入 0.00 但还没按下最后一位时显示为 0.00 但实际输入串是 0.0parseAmount 返回的是 0。此时按钮不可用是符合预期的用户会继续输入。但如果你不小心把 parseAmount 写成parseFloat(input.replace(/[^\d.]/g, ))遇到 0.0 会返回 0遇到空串返回 NaNNaN 比较时就是 false所以按钮失效逻辑一样成立。两种写法都行但字符串解析法更可控推荐用字符串法。5.4 常见错误速查表错误类型现象原因解决方式invalid total_fee支付时提示金额无效传入的金额单位是元微信要求分前端用字符串解析切分为整数分后传后端签名错误拉起支付时返回签名错误package 参数重复拼了 prepay_id 前缀直接透传后端返回的 package 值当前页面无法支付按钮点击无反应检测不到 WeixinJSBridge等待WeixinJSBridgeReady事件再绑定金额显示 28.99...页面金额显示多出一堆小数浮点乘法精度丢失用字符串截断替代乘法计算键盘弹起后页面错位输入时看到底层页面滚动fixed 元素在键盘弹起后的定位变化改用 flex 布局 键盘作为普通元素随文档流排布表格里第五条值得展开一下。传统写法喜欢用position: fixed; bottom: 0来固定键盘这在部分安卓 WebView 里会有问题键盘弹起时可视区域改变fixed 元素的位置会跳。改用 flex 布局键盘作为页面的最后一个普通块级元素跟着文档流放到容器底部这样不管键盘弹起还是收起布局都是一致的不会出现跳动。5.5 如何模拟微信支付环境进行测试开发时最常见的痛点是没有真实商户号怎么验证支付流程我的建议是走两条路。第一条路如果你的后端是用的微信支付 v3 接口但商户号还没申请下来可以去微信支付官方申请开发版沙箱环境。用沙箱的商户号 沙箱密钥可以在测试环境里跑通完整的回调流程体验和正式环境几乎一样。第二条路纯前端做页面演示时不真正联调微信支付接口而是模拟一个支付成功的分支。在payBtn点击后延时 1 秒弹出一个支付成功页面这主要用来验证前端交互逻辑——比如支付成功后的页面跳转、金额清零、订单状态更新等。等正式环境就绪后只需要把模拟的部分替换成真实 API 调用即可。无论如何都要注意一点千万别拿正式环境的商户号和密钥在前端代码里硬编码。曾经有项目把mchid和apiV3Key直接写在前端被人在 GitHub 上扫到了后果就是商户号被冻结。密钥这类敏感信息永远只能存在于后端配置里。6. 扩展思路项目做到这里核心的支付页面逻辑已经完整了。如果还想继续延展有两条路可以走。一是把键盘抽象成通用组件。当前的数字键盘只服务金额输入但同样的交互可以复用到手机号输入、验证码输入、邀请码输入等场景。抽象成一个独立组件后配置项包括整数位上限、小数位上限、是否允许负数、是否允许小数点、是否显示清零按钮、是否支持长按删除等一套代码通吃所有数字输入场景。二是增加收银台的业务形态。比如支持多商品结算页面上方展示购物车列表下方是应收金额用户确认后进入支付流程。这种形态下键盘输入的不再是任意金额而是锁定在购物车总额上用户只能选择确认支付而不能改金额。实际商超收银台大多是这种模式。这样支付环节更安全用户体验也更顺畅——用户不需要自己算账扫码后直接确认。我在实际项目中最常遇到的形态其实是这样既有固定金额的场景又有让用户自由输入金额的场景比如咖啡馆小费、付费社群。两种形态并存时键盘组件要支持金额锁定/解锁两种模式按下 6 位以内密码格式的校验逻辑也要抽出来共用。做好这两个模式这套代码差不多可以吃遍绝大多数 H5 收银场景了。本文还有配套的精品资源点击获取
