HTML怎么做信用卡输入框_html信用卡号格式化输入框实现【零基础】-html教程-PHP中文网

真正可用的信用卡号输入框需实现「实时格式化 + 光标位置保护 + 删除逻辑适配」；应优先用 beforeinput 事件结合 inputtype 判断操作类型，清除非数字后按卡组织规则（如visa 4-4-4-4、amex 4-6-5）分组，禁用硬编码空格与强制截断。

html怎么做信用卡输入框_html信用卡号格式化输入框实现【零基础】

信用卡号输入框不是简单加个 input type="text" 就完事——用户随手输一串 16 位数字，没有空格或分组，校验难、易出错、体验差。真正可用的实现，核心在于「实时格式化 + 光标位置保护 + 删除逻辑适配」，三者缺一不可。

常见写法是监听 oninput，把值用正则 .replace(/(\d{4})(?=\d)/g, '$1 ') 加空格，再赋回 value。问题立刻出现：用户在中间删一位，光标会跳到末尾；粘贴一串数字后光标卡在开头；连续删除时分组错乱。

beforeinput 在浏览器实际修改值之前触发，能拿到原始输入行为类型（insertText、deleteContentBackward 等），配合 getSelection() 可精准计算光标应处位置。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

监听 beforeinput，用 event.inputType 判断操作类型，避免盲目替换
读取当前 input.value 和 selectionStart，模拟格式化后的字符串，再反推光标在新字符串中的合理位置
调用 event.preventDefault() 阻止默认行为，再手动设置 input.value 和 setSelectionRange()
注意兼容性：beforeinput 在 Safari 16.4+ 和 Chrome/Firefox 中稳定，旧 Safari 需降级到 input + 光标修复逻辑

别硬写死「每 4 位加空格」。Visa 是 4-4-4-4，Amex 是 4-6-5，Diners 是 4-6-4，而且卡号长度本身就有 13–19 位差异。前端格式化只是辅助，不能替代后端 Luhn 校验。

建议先用 value.replace(/\D/g, '') 清除所有非数字字符，再按目标卡组织规则分组（可结合卡号前缀识别，如 ^4 是 Visa，^3[47] 是 Amex）
不要在输入过程中强制补零或截断——用户可能正在输入，提前截成 16 位会误杀 19 位的 Diners 卡
显示空格用普通 ASCII 空格（' '），别用或 \u2007，否则复制粘贴会带多余字符

示例片段（简化版）：

function formatCardNumber(value) {
  const digits = value.replace(/\D/g, '');
  if (digits.length

安卓微信、iOS 原生键盘的粘贴行为常绕过 beforeinput，且部分机型会触发两次 input。不处理就会出现「粘贴 1234567890123456，显示成 1234 5678 9012 3456 」但光标停在开头，用户无法继续输入。

监听 paste 事件，event.preventDefault()，读取 event.clipboardData.getData('text')，清洗、格式化后插入
对 compositionstart/compositionend 做标记，避免中文输入法上屏时重复格式化
iOS Safari 对 setSelectionRange 的支持有延迟，建议加 setTimeout(..., 0) 微任务兜底
测试真机：重点看微信内置浏览器、iOS 17 Safari、三星键盘，模拟器容易漏掉光标跳变问题