Coding/JavaScript
[JavaScript] 자바스크립트로 input 태그에 휴대전화번호 하이픈(-) 넣는 방법 !!
포스트it
2023. 3. 17. 09:00
728x90
반응형
[JavaScript] 자바스크립트로 input 태그에 휴대전화번호 하이픈(-) 넣는 방법 !!
회원가입이나 휴대폰번호 받을 때 숫자만 입력해도 자동으로 하이픈(-) 넣는 코드입니다 !
예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="phoneNum" maxlength="13">
</body>
</html>
<script>
var autoHypenPhone = function(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;
}
var phoneNum = document.getElementById('phoneNum');
phoneNum.onkeyup = function(){
console.log(this.value);
this.value = autoHypenPhone( this.value ) ;
}
</script>결과값
728x90
반응형