[자바스크립트] input 창에서 핸드폰 번호 자동으로 하이픈 입력하기

기본적으로 회원가입 폼을 만들때나 고객정보를 받기위해 폼을 만들때

핸드폰 번호를 입력하는란을 만들때가 있습니다.

보통은 select 박스로 010,011,017 등을 선택하게 만들고

input 박스 2개를 만들어서 나머지 번호를 받도록 만드는게 일반적이긴 합니다.

하지만 CSS를 브라우저별로 맞춰야 하고 간격유지와 반응형으로 제작시

CSS를 넣기가 만만치 않습니다.

그래서 input 창에 숫자를 입력하면 자동으로 하이픈이 들어갈수 있도록

스크립트로 처리를 하니 CSS를 따로 만들필요가 없어서 편했습니다.

HTML 부분

JS부분

         $('.phone').keydown(function(event) {
             var key = event.charCode || event.keyCode || 0;
             $text = $(this); 
             if (key !== 8 && key !== 9) {
                 if ($text.val().length === 3) {
                     $text.val($text.val() + '-');
                 }
                 if ($text.val().length === 8) {
                     $text.val($text.val() + '-');
                 }
             }

             return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));			
         });

이렇게 코드를 짜면 input 창에 대한 CSS를 줄일수 있고, 반응형제작도 훨씬 편하네요.

나중에 활용을 하기위해 기록을 합니다.