パーツ番号 04-02-11 ・ JavaScript使用

分割認証コード入力(OTP)

1桁入力するたびに自動で次の枠へフォーカスが移動する認証コード欄。WordPressの会員サイトの二段階認証やメール確認画面に利用できます。

autojsinput

プレビュー

ソースコード

HTML

<div class="d04-02-11-wrap">
          <p class="d04-02-11-label">認証コードを入力してください</p>
          <div class="d04-02-11-boxes">
            <input class="d04-02-11-box" type="text" inputmode="numeric" maxlength="1" aria-label="1桁目">
            <input class="d04-02-11-box" type="text" inputmode="numeric" maxlength="1" aria-label="2桁目">
            <input class="d04-02-11-box" type="text" inputmode="numeric" maxlength="1" aria-label="3桁目">
            <input class="d04-02-11-box" type="text" inputmode="numeric" maxlength="1" aria-label="4桁目">
            <input class="d04-02-11-box" type="text" inputmode="numeric" maxlength="1" aria-label="5桁目">
            <input class="d04-02-11-box" type="text" inputmode="numeric" maxlength="1" aria-label="6桁目">
          </div>
        </div>

CSS

.d04-02-11-wrap{width:min(300px,100%);text-align:center}
        .d04-02-11-label{margin:0 0 14px;font-size:13px;color:#555}
        .d04-02-11-boxes{display:flex;gap:8px;justify-content:center}
        .d04-02-11-box{
          width:38px;height:46px;text-align:center;font-size:18px;font-weight:700;
          border:2px solid #d5d9e0;border-radius:8px;outline:none;color:#2b3245;
          transition:border-color .2s;
        }
        .d04-02-11-box:focus{border-color:#4a6cf7}

JavaScript

(function(){
        var wrap=document.querySelector('.d04-02-11-wrap');
        if(!wrap)return;
        var boxes=[].slice.call(wrap.querySelectorAll('.d04-02-11-box'));
        boxes.forEach(function(box,i){
          box.addEventListener('input',function(){
            box.value=box.value.replace(/[^0-9]/g,'').slice(0,1);
            if(box.value && boxes[i+1]){ boxes[i+1].focus(); }
          });
          box.addEventListener('keydown',function(e){
            if(e.key==='Backspace' && !box.value && boxes[i-1]){ boxes[i-1].focus(); }
          });
        });
      })();

クラス名 .d04-02-11 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。