자바스크립트 숫자 앞에 0 자동으로 넣기

사용자가 input text에 값을 입력할 때 숫자가 한자리인 경우 0을 자동으로 넣어주는 함수를 공유하고자 합니다.

해당 함수를 사용하는 예로는 월을 입력할 때 1~9월인 경우 숫자 앞에 0을 붙일 수 있고(01월, 02월.. 등), 시간이나 분을 입력할 경우(01시, 02시... 등)에도 함수를 사용할 수 있습니다. 

예제를 통해 바로 알아보겠습니다.

zeroFill함수에서 this는 값을 위함이고, 2는 자릿수 입니다.

예를 들어 01, 02의 값이 아닌 001, 002을 채우고자 한다면 3으로 변경해서 사용해주시면 될 것 같습니다.

 

<input type="text" id="test" maxlength="2" onblur="zeroFill(this, 2);" />

 

<script>

//숫자가 한자리인 경우 0 붙이기
function zeroFill(target, width) {
  var n = target.value;
  var id = target.id;
  n = n + "";
  if(n.length >= width){
   document.getElementById(id).value = n;
  }else{
   document.getElementById(id).value = new Array(width - n.length + 1).join('0') + n;
  }
}

</script>

 

테스트 한번 해보세요.

1) 숫자 2자리

2) 숫자 3자리