핸드폰 번호 하이픈(-) 자동입력

최근 UI 작업 중에 핸드폰 번호 입력 시 자동으로 하이픈이 입력되도록 처리해달라는 요청이 있어 keyup event에 바인딩하여 쓸 용도로 자동 하이픈 처리 함수 하나를 만들어 봤다.

원리는 매우 단순하다.
일단 input box에 입력을 한다고 했을 때 value값을 인수로 넘겨주고 넘겨 받은 값으로 부터, 숫자 이외의 것들은 모두 제거하고 현재 입력된 값의 길이에 따라 {3}-{3}-{3} 형태 혹은 {3}-{4}-{3} 형태가 되도록 잘라내어 문자열을 재구성 하는 방식이다.

바로 적용을 시켜야 하는 부분이라서 최적화 부분은 크게 고민하지 않고 즉흥적으로 코드를 짰기 때문에 차후에 한 번 더 나은 코드를 고민해 보면 좋을 듯.

Source Code

function autoHypenPhone(​str){
  str = str.​replace(/[​^0​-9]​/g, '');
  var tmp = '';
  if( str.​length < 4){
    return str;
  }else if(str​.length < 7){
    tmp += str.substr(0, 3);
    tmp += '-';
    tmp += str.substr(3);
    return tmp;
  }else if(str​.length < 11){
    tmp += str.​substr(0, 3);
    tmp += '-';
    tmp += str.substr(3, 3);
    tmp += '-';
    tmp += str​.substr(6);
    return tmp;
  }else{
    tmp += str.substr(0, 3);
    tmp += '-';
    tmp += str.​substr(3, 4);
    tmp += '-';
    tmp += str​.substr(7);
    return tmp;
  }
  return str;
}

작성자

멀더끙

접근성에 관심이 많은 Front-End Developer, 커피 애호가, 사진 찍기 좋아하는 여행 러버, 아직도 블로그 뭘 쓸지 모르겠는 초보 블로거, 그냥 이것 저것 개인의 생각을 끄적끄적이는 멀더끙의 블로그입니다.

댓글