input 포맷(전화번호 입력받기)__regex__replace__substr

input에 데이터를 입력을 받을때, 해당 코드 포맷에 맞추어 입력해줘야하는 요구가 있었다.

 

디테일한 요구조건

1. 숫자만 입력

2. {0000 0000} 포맷

3. max 8자

 

 

HTML

<label for="code"> 
  해당 코드를 입력해주세요.<br> 
  <span style="font-size:12px;">(EX : 1234 5678)</span><br>
</label> 

<input id="code" type="text">

 

JS

$('#code').on('input', function(){ 
  var thisVal = $(this).val().replace(/\s|\D/g, '');
  thisVal = thisVal.replace(/(\d{4})\B/g, '$1 ');
  thisVal = thisVal.substr(0,9); 

  $(this).val(thisVal); 
});	

 

CSS

#code{margin-top:10px; display:block;}

 

문자를 입력받게되면 빈값으로 치환했고 그 다음 한칸 스페이스와 포맷에 맞춰 삽입했다.

그리고 마지막으로 스페이스 포함 9자 이상일 경우 노출되지 않도록 9자까지만 subStr로 잘라서 해당 input에 넣어줬다.

 

예제

See the Pen accesscode input format example by leeyoonseo (@okayoon) on CodePen.