React实现带默认16位零的银行卡号输入框功能

下面是满足需求的实现代码，初始显示带空格的16个零，输入数字时依次替换对应位置的零，同时自动维护空格分隔格式：

import React, { useState } from 'react'

function CardNumber() {
  // 初始值设为带空格的16个零
  const [cardNumber, setCardNumber] = useState('0000 0000 0000 0000')

  const handleCardNumberChange = (e) => {
    // 提取输入中的所有数字
    const inputDigits = e.target.value.replace(/\D/g, '')
    // 把初始的零字符串拆成数组，方便替换
    let cardArray = cardNumber.replace(/\s/g, '').split('')
    
    // 遍历输入的数字，依次替换对应位置的零
    inputDigits.split('').forEach((digit, index) => {
      if (index < 16 && cardArray[index] === '0') {
        cardArray[index] = digit
      }
    })
    
    // 重新添加空格分隔，每4位加一个空格
    const formattedNumber = cardArray.join('').replace(/(\d{4})(?=\d)/g, '$1 ')
    setCardNumber(formattedNumber)
  }

  return (
    <input
      value={cardNumber}
      onChange={handleCardNumberChange}
      maxLength={19} // 16位数字+3个空格，总长度19
      inputMode="numeric" // 唤起数字键盘
    />
  )
}

export default CardNumber

关键实现细节： #

• 初始状态：直接将useState的初始值设为'0000 0000 0000 0000'，满足初始显示16个零的要求。
• 数字过滤：用replace(/\D/g, '')过滤掉所有非数字字符，确保只处理数字输入。
• 零替换逻辑：把卡号字符串去掉空格转成数组，遍历输入的数字，只替换对应位置的零，避免覆盖已输入的数字。
• 格式维护：通过正则replace(/(\d{4})(?=\d)/g, '$1 ')自动给每4位数字添加空格，保持银行卡号的标准格式。
• 输入限制：设置maxLength={19}（16位数字+3个空格），防止输入过多内容；inputMode="numeric"让移动端唤起数字键盘，提升用户体验。

内容的提问来源于stack exchange，提问作者Нікіта Гончарук