如何实现支持多格式金额输入且仅允许数字、逗号、小数的TextInput

核心需求回顾 #

• 仅允许输入数字、逗号（,）和小数点（.）
• 自动过滤非法字符（如字母、特殊符号），保留有效数字内容
• 支持多种金额格式：整数（250）、带千分位逗号的金额（2,50,000）、带小数的金额（2.5、2.50）
• 维持用户输入的合法格式，不强制转换（如保留用户输入的印度式千分位逗号）

实现思路 #

1. 非法字符过滤：用正则表达式直接清除所有非允许的字符
2. 小数点校验：确保输入中最多只有一个小数点
3. 逗号合法性校验：避免逗号出现在开头、结尾或与小数点相邻的位置
4. 光标位置维护：修正过滤后的光标位置，避免输入时光标自动跳转

代码实现（React版本） #

import { useState, useRef, useEffect } from 'react';

const AmountInput = () => {
  const [value, setValue] = useState('');
  const inputRef = useRef(null);
  let prevCursorPos = useRef(0);

  const handleInputChange = (e) => {
    const input = e.target;
    prevCursorPos.current = input.selectionStart;
    let rawValue = input.value;

    // 过滤非法字符：只保留数字、逗号、小数点
    let filtered = rawValue.replace(/[^0-9,.]/g, '');

    // 处理多个小数点：仅保留第一个
    const dotIndices = [...filtered.matchAll(/\./g)].map(match => match.index);
    if (dotIndices.length > 1) {
      filtered = filtered.slice(0, dotIndices[0] + 1) + 
                 filtered.slice(dotIndices[0] + 1).replace(/\./g, '');
    }

    // 处理非法逗号位置
    filtered = filtered
      .replace(/^,+/, '') // 移除开头的逗号
      .replace(/,\./g, '.') // 移除小数点前的逗号（如2,.5 → 2.5）
      .replace(/\.,/g, '.') // 移除小数点后的逗号（如2.5,0 → 2.50）
      .replace(/,$/, ''); // 移除结尾的逗号

    setValue(filtered);
  };

  // 修正光标位置
  useEffect(() => {
    if (!inputRef.current) return;
    const input = inputRef.current;
    const diff = value.length - input.value.length;
    const newPos = Math.max(0, prevCursorPos.current + diff);
    input.setSelectionRange(newPos, newPos);
  }, [value]);

  return (
    <input
      ref={inputRef}
      type="text"
      value={value}
      onChange={handleInputChange}
      placeholder="示例：250、2,50,000、2.50"
    />
  );
};

export default AmountInput;

测试场景验证 #

• 输入2f50 → 自动过滤为250
• 输入2.5 → 保留为2.5
• 输入2,50,000 → 维持原格式不变
• 输入2..50 → 自动修正为2.50
• 输入,250. → 自动修正为250
• 输入12,34.56,78 → 自动修正为12,34.5678

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