Reactで、電話番号を入力しながらハイフンを入れる方法

0 → 09 → 090 → 090-1 → 090-12 → 090-123 → 090-1234 → 090-1234-5 → 090-1234-56 → 090-1234-567 → 090-1234-5678
0 → 03 → 03-1 → 03-12 → 03-123 → 03-1234 → 03-1234-5 → 03-1234-56 → 03-1234-567 → 03-1234-5678
0 → 04 → 046 → 0466 → 0466-1 → 0466-12 → 0466-12-3 → 0466-12-34 → 0466-12-345 → 0466-12-3456
0 → 01 → 012 → 0120 → 0120-1 → 0120-12 → 0120-123 → 0120-123-4 → 0120-123-45 → 0120-123-456
0 → 01 → 011 → 011-2 → 011-23 → 011-234 → 011-234-5 → 011-234-56 → 011-234-567 → 011-234-5678
12桁（12文字）: ハイフンを含む=false
parseDigits("０９０－１２３４ー５６７８"): 09012345678

import { useState } from 'react';
import { formatIncompletePhoneNumber, parseDigits } from 'libphonenumber-js';

// 入力のたびに数字だけを取り出して、整え直すだけの版
export function NaivePhoneInput({ id }: { id?: string }) {
  const [digits, setDigits] = useState('');
  return (
    <input
      id={id}
      type="tel"
      value={formatIncompletePhoneNumber(digits, 'JP')}
      onChange={(e) => setDigits(parseDigits(e.target.value).slice(0, 11))}
    />
  );
}

--- 2. 途中に数字を足す（090-1234-567 の「1」の後ろに 9）
前: "090-1|234-567"
後: "090-1923-4567|"
続けて 8: "090-1923-4567|"

--- 3. ハイフンの直後で Backspace（090-1234-5678）
前: "090-1234-|5678"
1回目: "090-1234-5678|"
2回目: "090-1234-567|"

import { useLayoutEffect, useRef, useState, type ChangeEvent } from 'react';
import { formatIncompletePhoneNumber, parseDigits } from 'libphonenumber-js';

const MAX_DIGITS = 11;

// 整えた文字列の中で、n 個目の数字のすぐ後ろの位置を返す
function caretAfterDigits(formatted: string, n: number) {
  if (n === 0) return 0;
  let count = 0;
  for (let i = 0; i < formatted.length; i++) {
    if (/\d/.test(formatted[i]) && ++count === n) return i + 1;
  }
  return formatted.length;
}

type Props = { id?: string; onDigitsChange?: (digits: string) => void };

export function PhoneInput({ id, onDigitsChange }: Props) {
  const ref = useRef<HTMLInputElement>(null);
  // 数字だけの値と、描き直したあとのカーソル位置を一緒に持つ
  const [state, setState] = useState({ digits: '', caret: 0 });
  const formatted = formatIncompletePhoneNumber(state.digits, 'JP');

  // 描き直したあと、ブラウザが画面を描く前にカーソルを戻す
  useLayoutEffect(() => {
    const el = ref.current!;
    if (document.activeElement === el) el.setSelectionRange(state.caret, state.caret);
  }, [state]);

  function handleChange(e: ChangeEvent<HTMLInputElement>) {
    const input = e.target;
    const caret = input.selectionStart ?? input.value.length;
    let digits = parseDigits(input.value);
    // カーソルより前にある数字の数を数えておく
    let before = parseDigits(input.value.slice(0, caret)).length;

    // ハイフンだけを Backspace や Delete で消したときは、その隣の数字を消す
    const inputType = (e.nativeEvent as InputEvent).inputType;
    if (digits === state.digits && inputType === 'deleteContentBackward' && before > 0) {
      digits = digits.slice(0, before - 1) + digits.slice(before);
      before -= 1;
    } else if (digits === state.digits && inputType === 'deleteContentForward') {
      digits = digits.slice(0, before) + digits.slice(before + 1);
    }

    digits = digits.slice(0, MAX_DIGITS);
    before = Math.min(before, digits.length);
    const next = formatIncompletePhoneNumber(digits, 'JP');
    setState({ digits, caret: caretAfterDigits(next, before) });
    onDigitsChange?.(digits);
  }

  return (
    <input
      ref={ref}
      id={id}
      type="tel"
      autoComplete="tel-national"
      value={formatted}
      onChange={handleChange}
    />
  );
}

--- 2. 途中に数字を足す（090-1234-567 の「1」の後ろに 9）
前: "090-1|234-567"
後: "090-19|23-4567"
続けて 8: "090-198|2-3456"

--- 3. ハイフンの直後で Backspace（090-1234-5678）
前: "090-1234-|5678"
1回目: "090-1234|-5678"
2回目: "090-123|5-678"

===== 入力イベントの種類（#phone で Backspace と Delete を押す）
InputEvent inputType=deleteContentBackward
InputEvent inputType=deleteContentForward

--- 3. ハイフンの直後で Backspace（090-1234-5678）
前: "090-1234-|5678"
1回目: "090-123|5-678"
2回目: "090-12|56-78"
--- 4. 途中で Delete（ハイフンの直前）
前: "090-1234|-5678"
後: "090-1234|-678"

--- 5. 途中で数字以外のキー（a）を打つ
前: "090-1|234-567"
後: "090-1234-567|"

--- 5. 途中で数字以外のキー（a）を打つ
前: "090-1|234-567"
後: "090-1|234-567"

--- 6. 全角の文字列をまとめて入れる（貼り付けと同じ insertText）
後: "090-1234-5678|"

const [digits, setDigits] = useState('');
// ...
<label htmlFor="phone">電話番号</label>
<PhoneInput id="phone" onDigitsChange={setDigits} />
<p data-testid="digits">送る値：{digits}</p>