Reactで、金額を3桁区切りで入力できる欄を作る方法

value に "1,234" を入れる → ""
"1,234" とキーで打つ → "1234" valueAsNumber=1234

const yen = new Intl.NumberFormat('ja-JP');

// 全角の数字を半角にし、数字以外を取り除く
export function toDigits(text: string): string {
  return text
    .replace(/[０-９]/g, (c) => String.fromCharCode(c.charCodeAt(0) - 0xfee0))
    .replace(/\D/g, '');
}

// 数字の並びを、3桁区切りの文字列にする（先頭の 0 は消える）
export function formatDigits(digits: string): string {
  return digits === '' ? '' : yen.format(Number(digits));
}

// 区切った文字列の中で、左から count 個目の数字の直後の位置
export function caretAfterDigits(formatted: string, count: number): number {
  if (count === 0) return 0;
  let seen = 0;
  for (let i = 0; i < formatted.length; i++) {
    if (/\d/.test(formatted[i])) seen++;
    if (seen === count) return i + 1;
  }
  return formatted.length;
}

import { useLayoutEffect, useReducer, useRef, useState } from 'react';
import { caretAfterDigits, formatDigits, toDigits } from './digits';

type Props = {
  id?: string;
  name?: string;
  value: number | null;
  onChange: (value: number | null) => void;
  maxDigits?: number;
};

export function CurrencyInput({ id, name, value, onChange, maxDigits = 12 }: Props) {
  const inputRef = useRef<HTMLInputElement>(null);
  const caret = useRef<number | null>(null); // 次の描画の後に置くカーソルの位置
  const [, rerender] = useReducer((n: number) => n + 1, 0);
  const [composing, setComposing] = useState<string | null>(null); // IME で変換中の文字列
  const text = value === null ? '' : formatDigits(String(value));

  useLayoutEffect(() => {
    if (caret.current === null || !inputRef.current) return;
    inputRef.current.setSelectionRange(caret.current, caret.current);
    caret.current = null;
  });

  function apply(raw: string, pos: number) {
    const all = toDigits(raw);
    const digits = all.replace(/^0+(?=\d)/, ''); // 先頭の余分な 0 を消す
    if (digits.length > maxDigits) {
      caret.current = Math.max(0, pos - 1); // 桁があふれる入力は受け付けない
      rerender();
      return;
    }
    // カーソルより左にある数字の数を、区切り直した後も保つ
    const left = Math.max(0, toDigits(raw.slice(0, pos)).length - (all.length - digits.length));
    const next = digits === '' ? null : Number(digits);
    caret.current = caretAfterDigits(formatDigits(digits), left);
    if (next === value) rerender(); // 値が同じでも、カーソルを置き直す
    onChange(next);
  }

  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const raw = e.target.value;
    // 変換中は区切り直さず、打ったままの文字列を出しておく
    if ((e.nativeEvent as InputEvent).isComposing) {
      setComposing(raw);
      return;
    }
    apply(raw, e.target.selectionStart ?? raw.length);
  }

  function handleCompositionEnd(e: React.CompositionEvent<HTMLInputElement>) {
    const el = e.currentTarget;
    setComposing(null);
    apply(el.value, el.selectionStart ?? el.value.length);
  }

  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
    const el = e.currentTarget;
    const pos = el.selectionStart;
    if (pos === null || pos !== el.selectionEnd) return;
    // 区切りの「,」を消そうとしたときは、隣の数字を消す
    if (e.key === 'Backspace' && el.value[pos - 1] === ',') el.setSelectionRange(pos - 1, pos - 1);
    if (e.key === 'Delete' && el.value[pos] === ',') el.setSelectionRange(pos + 1, pos + 1);
  }

  return (
    <>
      <input
        ref={inputRef}
        id={id}
        type="text"
        inputMode="numeric"
        autoComplete="off"
        value={composing ?? text}
        onChange={handleChange}
        onCompositionEnd={handleCompositionEnd}
        onKeyDown={handleKeyDown}
      />
      {name && <input type="hidden" name={name} value={value ?? ''} />}
    </>
  );
}

変換中「１」 → "1|" value=1
変換中「１２」 → "112|" value=112
変換中「１２３」 → "112,123|" value=112123
変換中「１２３４」 → "1,121,231,234|" value=1121231234
確定 → "1,121,231,234|" value=1121231234

変換中「１」 → "１|" value=null
変換中「１２」 → "１２|" value=null
変換中「１２３」 → "１２３|" value=null
変換中「１２３４」 → "１２３４|" value=null
確定 → "1,234|" value=1234

15桁 999999999999999 → 999,999,999,999,999 isSafeInteger: true / BigInt: 999,999,999,999,999
16桁 9007199254740991 → 9,007,199,254,740,991 isSafeInteger: true / BigInt: 9,007,199,254,740,991
16桁 9007199254740993 → 9,007,199,254,740,992 isSafeInteger: false / BigInt: 9,007,199,254,740,993
16桁 9999999999999999 → 10,000,000,000,000,000 isSafeInteger: false / BigInt: 9,999,999,999,999,999

const [price, setPrice] = useState<number | null>(1234567);
const [sent, setSent] = useState('');
// …
<form onSubmit={(e) => {
  e.preventDefault();
  setSent(JSON.stringify(Object.fromEntries(new FormData(e.currentTarget))));
}}>
  <label htmlFor="price">金額</label>
  <div className="field">
    <CurrencyInput id="price" name="price" value={price} onChange={setPrice} />
    <span>円</span>
  </div>
  <button type="submit">送信</button>
</form>