전화번호 필드 구현

HTML

<input type="text" id="phone1" maxlength="3" required="required"/>-
<input type="text" id="phone2" maxlength="4" required="required"/>-
<input type="text" id="phone3" maxlength="4" required="required"/>

위처럼 input 태그를 3개 생성을 합니다.

위와 같이 생성이 됩니다.

정규표현식

<input type="text" id="phone1" maxlength="3" pattern="^01[0-9]{1}" required="required"/>-
<input type="text" id="phone2" maxlength="4" pattern="[0-9]{4}" required="required"/>-
<input type="text" id="phone3" maxlength="4" pattern="[0-9]{4}" required="required"/>

input 태그에 각각 위와 같은 pattern 속성을 삽입합니다.

^01[0-9]{1} : 반드시 01로 시작을 해야합니다. 마지막 한자리는 반드시 숫자여야 합니다.

[0-9]{4} : 반드시 숫자 4자리가 들어와야 합니다.

CSS

<style>
    input:invalid{
        border: red 1px solid;
    }
</style>

<style> 태그 사이에 위와 같은 css를 작성합니다.

input:invalid : input태그의 pattern이 일치하지 않을때 동작하는 css입니다.

위와 같이 빨갛게 변합니다. input태그의 pattern과 일치하지 않아서 그렇습니다.

위와 같이 pattern의 정규표현식에 알맞게 input에 값을 넣어준다면 원래대로 돌아옵니다.

입력하면 자동으로 다음 input으로 focus

const phone1 = document.getElementById('phone1');
const phone2 = document.getElementById('phone2');

phone1.addEventListener('keyup', (e) => {
    next(e.target.value, 3, 'phone2');
});
phone2.addEventListener('keyup', (e) => {
    next(e.target.value, 4, 'phone3');
});

function next(val, len, nextId) {
    if(val.length == len){
        document.getElementById(nextId).focus();
    }
}

위와 같은 JavaScript를 작성합니다.

next : val 파라미터의 길이가 len 의 길이와 일치하면, nextId 로 focus

위처럼 자동으로 다음 번호 입력창으로 focus 됩니다.