React中onChange格式化输入框值时内容丢失的问题

核心问题 #

你用了type="number"的输入框，这类输入框只允许输入数字、正负号和小数点（不同浏览器略有差异），空格属于无效字符。当你把带空格的字符串通过setCreditCardNumber设置给输入框的value时，number输入框会自动清空所有无效内容，这就是输入第5个字符（空格）后内容被清空的原因。

修复方案 #

1. 更换输入框类型 #

把输入框的type从number改成text，同时通过inputMode="numeric"让移动端弹出数字键盘，pattern="[0-9\s]*"限制输入内容，兼顾体验和输入规范。

2. 优化格式化逻辑 #

过滤掉非数字字符，避免用户输入字母、符号等，同时处理空值情况，防止match返回null导致报错。

修改后的完整代码：

import { useState } from 'react';

const CreditCardInput = () => {
  const [creditCardNumber, setCreditCardNumber] = useState<string>('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // 过滤所有非数字字符
    const cleanNum = e.target.value.replace(/\D/g, '');
    // 每4位分割并添加空格
    const formattedNum = cleanNum.match(/.{1,4}/g)?.join(' ') ?? '';
    setCreditCardNumber(formattedNum);
  };

  return (
    <input
      type="text"
      inputMode="numeric"
      pattern="[0-9\s]*"
      onChange={handleChange}
      value={creditCardNumber}
      placeholder="XXXX XXXX XXXX XXXX"
    />
  );
};

export default CreditCardInput;

额外说明 #

• inputMode="numeric"：让移动端浏览器弹出数字键盘，提升输入体验；桌面端可通过pattern配合表单验证提示用户输入数字。
• replace(/\D/g, '')：全局匹配非数字字符并移除，确保格式化的只有纯数字内容。
• 这样修改后，输入数字时会自动每4位添加空格，删除内容时也能正常同步格式化结果，不会出现清空问题。

内容的提问来源于stack exchange，提问作者Cookies