OTP（ワンタイムパスワード）6 桁入力
OTP 入力欄は、SMS や認証アプリで届く 6 桁のワンタイムパスワードを、 1 文字ずつマス目に入力 する UI です。各マスは maxlength="1" と inputmode="numeric" を持つ独立した input で、スマホでは数字キーボードが直接立ち上がります。
解説
OTP 入力欄は、SMS や認証アプリで届く 6 桁のワンタイムパスワードを、1 文字ずつマス目に入力する UI です。各マスは maxlength="1" と inputmode="numeric" を持つ独立した input で、スマホでは数字キーボードが直接立ち上がります。JavaScript は文字が入ると次のマスへ自動でフォーカスを送り、空のマスで Backspace を押すと前のマスへ戻る挙動を加え、コードを区切って打つ手間を減らしています。
使われるシーン
- ログイン時の二段階認証（2FA）
- SMS 認証コードの入力
- 決済やアカウント変更時の本人確認
桁数を変えるときは input の数を増減するだけで、自動フォーカスのロジックは末尾を判定して動くため修正不要です。マスのサイズや枠線色、フォーカス時の見た目は CSS で調整できます。なお現状はペースト時に各マスへ自動分割されないので、コードをまとめて貼り付けたい場合は paste イベントで 1 文字ずつ配る処理を足すと、より親切な入力体験になります。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
6 桁以外の桁数にもできますか？
はい。入力欄を増減するだけで桁数を変えられます。自動フォーカスの処理は配列の末尾を基準に動くため、桁数を変えても JavaScript を書き換える必要はありません。
コードをまとめて貼り付けると 1 マスにしか入りません
現状はマスごとに maxlength="1" を設けているため、貼り付けでは最初のマスにしか入りません。paste イベントを拾い、文字列を 1 文字ずつ各マスに配る処理を加えると、まとめて貼り付けても正しく分割されます。