OTP 入力 + 再送タイマー
SMS やメールで届く 6 桁の認証コードを入力する欄と、60 秒のカウントダウン付き再送リンクを組み合わせた認証 UX です。各マスは maxlength="1" の小さな入力欄で、JavaScript が 1 文字入るたびに次のマスへ自動でフォーカスを移すため、テンキー感覚でスムーズに打ち込めます。
解説
SMS やメールで届く 6 桁の認証コードを入力する欄と、60 秒のカウントダウン付き再送リンクを組み合わせた認証 UX です。各マスは maxlength="1" の小さな入力欄で、JavaScript が 1 文字入るたびに次のマスへ自動でフォーカスを移すため、テンキー感覚でスムーズに打ち込めます。再送は setInterval で 1 秒ごとに残り秒数を減らし、0 になった時点で「コードを再送信」が押せる状態へ切り替わります。
このパターンが必要な場面
- ログインや新規登録の二段階認証
- 電話番号やメールアドレスの本人確認
- 決済前の追加認証ステップ
待機時間は let t=60 の初期値を変えるだけで調整でき、再送の連打を防げます。実運用では、貼り付けで 6 桁が一度に入る場合の分配処理や、数字だけを受け付ける入力制限を足すとさらに使いやすくなります。入力欄には数字入力に適したキーボードが出るよう属性を補い、再送リンクは押せる状態が色だけでなく文言でも分かるようにしておくと、誰にとっても操作の迷いが減ります。
よくある質問
再送までの待ち時間を変えるには。
JavaScript の初期値 t を 60 から好きな秒数へ変更すれば、カウントダウンの長さが変わります。秒数を長くするほど再送の連打を抑えられます。
コードの桁数を 4 桁などに変えられますか。
変えられます。HTML 側の入力欄の数を必要な桁数だけ用意すれば、自動フォーカスの処理は入力欄を順にたどる作りなので桁数に追従します。