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
반응형
'Coding > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트로 div 태그안에 있는 내용 삭제 하는 방법 !! (0) | 2023.04.05 |
|---|---|
| [JavaScript] 자바스크립트로 STT API(Web Speech API) 사용하기 !! (0) | 2023.03.25 |
| [JavaScript] 자바스크립트로 휴대전화번호 자리수 정규화 체크하는 방법 !! (0) | 2023.03.16 |
| [JavaScript & jQuery] 자바스크립트로 주민번호 뒷자리 마스킹 하는 방법 !!(별표처리) (0) | 2023.03.15 |
| [JavaScript] 자바스크립트로 가상키보드 구현하는 방법 !! (0) | 2023.03.12 |
댓글