Reactで、ワンタイムパスワードを1桁ずつの欄で入力する方法

import { useRef, type ChangeEvent, type ClipboardEvent, type KeyboardEvent } from 'react';

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

type Props = {
  value: string[]; // 1欄に1文字。空の欄は ''
  onChange: (value: string[]) => void;
  onComplete?: (code: string) => void;
  labelledBy: string; // まとめて読み上げる見出しの id
};

export function OtpInput({ value, onChange, onComplete, labelledBy }: Props) {
  const length = value.length;
  const refs = useRef<(HTMLInputElement | null)[]>([]);

  const focusAt = (i: number) => refs.current[Math.max(0, Math.min(i, length - 1))]?.focus();

  // start の欄から順に数字を入れ、入れ終わった次の欄へフォーカスを移す
  const fillFrom = (start: number, digits: string) => {
    const next = [...value];
    let pos = start;
    for (const d of digits) {
      if (pos >= length) break;
      next[pos++] = d;
    }
    onChange(next);
    focusAt(pos);
    if (next.every((d) => d !== '')) onComplete?.(next.join(''));
  };

  const handleChange = (i: number, e: ChangeEvent<HTMLInputElement>) => {
    const raw = e.target.value;
    if (raw === '') {
      // Backspace などで欄が空になった
      onChange(value.map((d, j) => (j === i ? '' : d)));
      return;
    }
    // 欄の値ではなく、今回入った文字（InputEvent の data）を使う。
    // すでに数字がある欄に打つと値は「37」のようになるが、data は打った「7」だけになる
    const inserted = (e.nativeEvent as InputEvent).data;
    const digits = onlyDigits(inserted ?? raw);
    if (digits === '') return; // 数字以外のキーは受け付けない
    fillFrom(i, digits);
  };

  const handleKeyDown = (i: number, e: KeyboardEvent<HTMLInputElement>) => {
    if (e.key === value[i]) {
      // 入っている数字と同じ数字を打っても値が変わらず onChange が呼ばれないので、ここで次へ進む
      e.preventDefault();
      focusAt(i + 1);
    } else if (e.key === 'Backspace' && value[i] === '' && i > 0) {
      // 空の欄で Backspace を押したら、1つ前の欄を消してそこへ戻る
      e.preventDefault();
      onChange(value.map((d, j) => (j === i - 1 ? '' : d)));
      focusAt(i - 1);
    } else if (e.key === 'ArrowLeft') {
      e.preventDefault();
      focusAt(i - 1);
    } else if (e.key === 'ArrowRight') {
      e.preventDefault();
      focusAt(i + 1);
    }
  };

  const handlePaste = (i: number, e: ClipboardEvent<HTMLInputElement>) => {
    e.preventDefault();
    const digits = onlyDigits(e.clipboardData.getData('text'));
    if (digits !== '') fillFrom(i, digits);
  };

  return (
    <div role="group" aria-labelledby={labelledBy} style={{ display: 'flex', gap: '8px' }}>
      {value.map((d, i) => (
        <input
          key={i}
          ref={(el) => {
            refs.current[i] = el;
          }}
          type="text"
          inputMode="numeric"
          autoComplete={i === 0 ? 'one-time-code' : 'off'}
          aria-label={`${i + 1}桁目`}
          value={d}
          onChange={(e) => handleChange(i, e)}
          onKeyDown={(e) => handleKeyDown(i, e)}
          onPaste={(e) => handlePaste(i, e)}
          onFocus={(e) => e.target.select()}
          style={{ width: '2.4em', height: '2.8em', textAlign: 'center', fontSize: '20px', border: '1px solid #9aa5ab', borderRadius: '6px' }}
        />
      ))}
    </div>
  );
}

1 を打つ                          [1 _ _ _ _ _] フォーカス=2桁目 ボタン=押せない 表示=-
a を打つ                          [1 _ _ _ _ _] フォーカス=2桁目 ボタン=押せない 表示=-
2 を打つ                          [1 2 _ _ _ _] フォーカス=3桁目 ボタン=押せない 表示=-
3456 を打つ                       [1 2 3 4 5 6] フォーカス=6桁目 ボタン=押せる 表示=6桁そろいました：123456

記事の版：2桁目の 5 を選択して 5            [1 5 _ _ _ _] フォーカス=3桁目 ボタン=押せない 表示=-
  2桁目で input イベントが起きた回数: 0
nosamekey.html：2桁目の 5 を選択して 5  [1 5 _ _ _ _] フォーカス=2桁目 ボタン=押せない 表示=-
  2桁目で input イベントが起きた回数: 1

6桁目で Backspace                 [1 2 3 4 5 _] フォーカス=6桁目 ボタン=押せない 表示=-
空の6桁目で Backspace               [1 2 3 4 _ _] フォーカス=5桁目 ボタン=押せない 表示=-
← を2回                          [1 2 3 4 _ _] フォーカス=3桁目 ボタン=押せない 表示=-
9 を打つ（3桁目を上書き）                 [1 2 9 4 _ _] フォーカス=4桁目 ボタン=押せない 表示=-

1桁目で「123-456」を貼り付け             [1 2 3 4 5 6] フォーカス=6桁目 ボタン=押せる 表示=6桁そろいました：123456
4桁目で「987654」を貼り付け              [1 2 3 9 8 7] フォーカス=6桁目 ボタン=押せる 表示=6桁そろいました：123987
1桁目で「abc」を貼り付け                 [1 2 3 9 8 7] フォーカス=1桁目 ボタン=押せる 表示=6桁そろいました：123987

1桁目に「123456」                   [1 2 3 4 5 6] フォーカス=6桁目 ボタン=押せる 表示=6桁そろいました：123456
1桁目に全角の「１２３４５６」                [1 2 3 4 5 6] フォーカス=6桁目 ボタン=押せる 表示=6桁そろいました：123456
1桁目の末尾にカーソルで「123456」           [1 2 3 4 5 6] フォーカス=6桁目 ボタン=押せる 表示=6桁そろいました：123456
maxLength={1} の版で「123456」      [1 _ _ _ _ _] フォーカス=2桁目 ボタン=押せない 表示=-
maxLength={1} の版で貼り付け          [1 2 3 4 5 6] フォーカス=6桁目 ボタン=押せる 表示=6桁そろいました：123456

import { useState, type FormEvent } from 'react';
import { OtpInput } from './OtpInput';

const empty = () => Array<string>(6).fill('');

export function App() {
  const [digits, setDigits] = useState(empty);
  const [message, setMessage] = useState('');
  const complete = digits.every((d) => d !== '');

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setMessage(`送信したコード：${digits.join('')}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <p id="otp-label">確認コード（6桁）</p>
      <OtpInput
        value={digits}
        onChange={(next) => {
          setDigits(next);
          setMessage(''); // 書き直したら、前の表示を消す
        }}
        onComplete={(code) => setMessage(`6桁そろいました：${code}`)}
        labelledBy="otp-label"
      />
      <button type="submit" disabled={!complete}>確認する</button>
      <p role="status">{message}</p>
    </form>
  );
}