[JavaScript] 핸드폰번호, 생년월일 - 하이픈 자동 삽입하기 / Backspace keyCode

프로젝트 마무리로 핸드폰번호, 생년월일 정규식으로 유효성 검사를 하는데 - 하이픈을 수동으로 입력해야해서 불편함을 느꼈다. 그래서 입력된 값의 길이와 onkeyup 이라는 event를 사용하여 - 하이픈 자동 삽입하기까지 작성해보았다. 

 

 

 

 

생년월일 하이픈 자동 생성하기

html 에 onkeyup = "함수(this)" 코드 추가하기 

<div class="form-element">
	<input id="userbirth" name="userbirth"  onkeyup="birth_keyup(this)"  type="text" class="form-cell form-textbox form-textbox-text form-field inputFocus generic-input-field joinJS">
	<span aria-hidden="true" class="form-label" for="userbirth">
		생년월일
	</span>
</div>

html과 연결된 Javascript에 아래 코드 추가하기

//  생년월일 - 하이픈 자동 생성
function birth_keyup(obj){
    let birth_len = obj.value.length;
    if (event.keyCode==8){
        obj.value = obj.value.slice(0,birth_len)
        return 0;
    }else if(birth_len==4 || birth_len==7){
        obj.value += '-';
    }
}

obj 로 들어오는 건 위 html 의 input 요소가 들어온다. 

2020을 입력하면 onkeyup 함수가 키보드가 입력이 될 때 마다 (정확히 key가 누른 후 up 할 때) 해당 value의 길이가 4가 되면 '-'을 추가한다. 그런데 문제는 - 하이픈이 있는 상태에서 Backspace 키를 눌렀을 때 하이픈이 지워지고 다시 길이가 4가되어 - 하이픈이 추가된다. 그래서 event.keyCode==8 조건을 사용해 value값을 맞춰주었다. 

 

*Backspace 키보드 keycode == 8 

 

 

 

핸드폰 번호 하이픈 자동 생성하기 

html 에 onkeyup = "함수(this)" 코드 추가하기 

<div class="form-element">
	<input id="mobile" name="mobile" type="tel" onkeyup="mobile_keyup(this)" maxlength='13' class="generic-input-field inputFocus phone-field form-textbox form-textbox-text joinJS">
	<span class="form-label">전화번호</span>
</div>

html과 연결된 Javascript에 아래 코드 추가하기

//  Mobile  - 하이픈 자동 생성 
function mobile_keyup(obj){
    let mobile_len=obj.value.length;
    console.log(mobile_len)
    if(event.keyCode==8){
        obj.value=obj.value.slice(0,mobile_len); 
        return 0; 
    }else if (mobile_len==3 || mobile_len==8){
        obj.value += '-';
    }
}

핸드폰 번호도 동일하게 설정해 주기 - !