[JSP] 전화번호 입력시 자동 하이픈 넣기

안녕하세요~ jju_developer입니다~~

 

오늘은 보호자 전화번호를 서버에서 받아서 처리하는 로직중

 

전화번호를 01000000000 이렇게 입력하더라도,

 

jsp 에서 자동으로 010-0000-0000 이렇게 변환을 하고 싶어서 기능을 추가해보았는데용

 

공유드리겠습니다~!!

 

기존 코드는 아래와 같았습니다.

 

<td>
  <input type="text" class="form-control form-control-lg" id="mobile" name="mobile" value="${guardianMngDetail.mobile}" maxlength="20" oninput="this.value = this.value.replace(/[^0-9-]/g, '').replace(/(\..*)\./g, '');">
</td>

 

굉장히 기초적이고 빈약한 모습이죠?

 

이제 숫자만 입력하더라도 자동으로 하이픈이 들어가도록 해보겠습니다!

 

현재의 전화번호 입력 필드에 하이픈 자동 추가 기능을 적용하는 방법은 다음과 같습니다. 

UI는 그대로 유지하면서, 전화번호 입력 시 하이픈을 자동으로 추가하는 자바스크립트 기능을 포함시켜 보겠습니다.

1. JSP 코드 수정

전화번호 입력 필드의 oninput 이벤트 핸들러를 수정하여 autoHyphen 함수 호출하도록 변경합니다.

전화번호 입력 테이블 수정

<td>
 <input type="text" class="form-control form-control-lg" id="mobile" name="mobile" maxlength="20" oninput="autoHyphen(this)">
</td>

2. 자바스크립트 함수 추가

전화번호 입력 시 하이픈을 자동으로 추가하는 autoHyphen 함수를 추가합니다.

 

자동 하이픈 입력 js

const autoHyphen = (target) => {
        target.value = target.value
            .replace(/[^0-9]/g, '')
            .replace(/^(\d{2,3})(\d{3,4})(\d{4})$/g, "$1-$2-$3")
            .replace(/(\-{1,2})$/g, "");
    }

 

전화번호 자동 하이픈 - 입력

 

00000000000 입력시 000-0000-0000으로 변환됩니다!

 

쉽죵

 

저는 참고로 최대 길이를 13자리로 만 입력이 될 수 있게 수정했습니다!

 name="mobile" maxlength="13" oninput="autoHyphen(this)">

00000000000 입력시

 

 

수정사항 있으면 언제나 댓글 환영합니다~

 

 

다음에 또봐요!