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

自動フォーマット電話番号欄

数字を入力するたびにハイフン区切りへ自動整形される電話番号欄。WordPressの予約フォームや問い合わせフォームで入力ゆれのない電話番号を集められます。

autojsinput

プレビュー

ソースコード

HTML

<div class="d04-11-07-field">
          <label class="d04-11-07-label" for="d04-11-07-tel">電話番号</label>
          <input type="tel" class="d04-11-07-tel" id="d04-11-07-tel" placeholder="090-1234-5678" inputmode="numeric">
        </div>

CSS

.d04-11-07-field{width:min(260px,100%)}
        .d04-11-07-label{display:block;margin-bottom:6px;font-size:13px;color:#555;font-weight:700}
        .d04-11-07-tel{width:100%;padding:12px 14px;font-size:15px;letter-spacing:.03em;border:2px solid #d5d9e0;border-radius:8px;outline:none;background:#fff;transition:border-color .25s}
        .d04-11-07-tel:focus{border-color:#4a6cf7}
        .d04-11-07-tel.is-complete{border-color:#22b573}

JavaScript

(function(){
        var tel=document.querySelector('.d04-11-07-tel');
        if(!tel)return;
        tel.addEventListener('input',function(){
          var digits=tel.value.replace(/\D/g,'').slice(0,11);
          var formatted=digits;
          if(digits.length>7){
            formatted=digits.slice(0,3)+'-'+digits.slice(3,7)+'-'+digits.slice(7);
          }else if(digits.length>3){
            formatted=digits.slice(0,3)+'-'+digits.slice(3);
          }
          tel.value=formatted;
          tel.classList.toggle('is-complete',digits.length===11);
        });
      })();

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