2026, 새로운 도약을 시작합니다.

전화번호 입력시 자동 하이픈(-) 붙이기

input창에 사용자가 숫자를 입력하면 자동으로 하이픈(-)을


<script language="javascript">
function chk_tel(str, field){
var str;
str = checkDigit(str);
len = str.length;

if(len==8){
if(str.substring(0,2)==02){
error_numbr(str, field);
}else{
field.value = phone_format(1,str);
}
}else if(len==9){
if(str.substring(0,2)==02){
field.value = phone_format(2,str);
}else{
error_numbr(str, field);
}
}else if(len==10){
if(str.substring(0,2)==02){
field.value = phone_format(2,str);
}else{
field.value = phone_format(3,str);
}
}else if(len==11){
if(str.substring(0,2)==02){
error_numbr(str, field);
}else{
field.value = phone_format(3,str);
}
}else{
error_numbr(str, field);
}
}
function checkDigit(num){
var Digit = "1234567890";
var string = num;
var len = string.length
var retVal = "";
for (i = 0; i < len; i++){
if (Digit.indexOf(string.substring(i, i+1)) >= 0){
retVal = retVal + string.substring(i, i+1);
}
}
return retVal;
}
function phone_format(type, num){
if(type==1){
return num.replace(/([0-9]{4})([0-9]{4})/,"$1-$2");
}else if(type==2){
return num.replace(/([0-9]{2})([0-9]+)([0-9]{4})/,"$1-$2-$3");
}else{
return num.replace(/(^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/,"$1-$2-$3");
}
}
function error_numbr(str, field){
alert("정상적인 번호가 아닙니다.");
field.value = "";
field.focus();
return;
}

</script>
<input type="input" name="tel1" onblur="chk_tel(this.value,this);" >

사용예)
032)1234-1234 = 032-1234-1234
032.1234.1234 = 032-1234-1234
03212341234 = 032-1234-1234
02)123-1234 = 02-123-1234
02)1231234 = 02-123-1234
021231234 = 02-123-1234
02)12312345 = 02-1231-2345
15881234 = 1588-1234
등 서울번호 및 각지역번호 인터넷번호 가능


이정도는 다 아시겠지만..그래도 ..
|

댓글 10개

전화번호를 빈칸으로 두고 다른입력란으로 가면 "정상적인 번호가 아닙니다."가 계속 경고메세지로 뜨는데 다른 방법이 또 있는지요? 이런 소스 공유해 주셔서 정말 감사드립니다.^^
제가 초보라서 이 코드를 적용하는 파일과 위치를 알려주시면 감사하겟읍니다
감사합니당!!
좋아요..잘쓰겠습니다.감사합니다.
function error_numbr(str, field){
alert("정상적인 번호가 아닙니다.");
field.value = "";
field.focus();
return;
}

이부분을 삭제하면 경고창이 발생하지 않습니다.
//-- 2019.10.15 전화번호 자동하이픈
function chk_tel(str, field) {
var str;
for (var i = 0; i < str.length; i++) {
ret = str.charCodeAt(i);
if (!((ret > 47) && (ret < 58))) {
alert("숫자만 입력하세요");
field.value = "";
field.focus();
false; } break; }

str = checkDigit(str);
len = str.length;

if(!len) { false; }
else if(len==8) { if(str.substring(0,2)==02) { error_numbr(str, field); }
else { field.value = phone_format(1,str); } }
else if(len==9) { if(str.substring(0,2)==02){ field.value = phone_format(2,str); }
else { error_numbr(str, field); } }
else if(len==10) { if(str.substring(0,2)==02) { field.value = phone_format(2,str); }
else { field.value = phone_format(3,str); } }
else if(len==11) { if(str.substring(0,2)==02) { error_numbr(str, field); }
else { field.value = phone_format(3,str); } }
else { error_numbr(str, field); }
}

function checkDigit(num) {
var Digit = "1234567890";
var string = num;
var len = string.length
var retVal = "";
for (i = 0; i < len; i++) {
if(Digit.indexOf(string.substring(i, i+1)) >= 0) { retVal = retVal + string.substring(i, i+1); } }
return retVal;
}

function phone_format(type, num) {
if(type==1) {
return num.replace(/([0-9]{4})([0-9]{4})/,"$1-$2"); }
else if(type==2) { return num.replace(/([0-9]{2})([0-9]+)([0-9]{4})/,"$1-$2-$3"); }
else { return num.replace(/(^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/,"$1-$2-$3"); }
}

function error_numbr(str, field) { alert(str+"는 정상적인 번호가 아닙니다.");
field.value = "";
field.focus();
return; }

-> 이렇게 수정했더니 괜찬네요.
1.입력시 빈칸으로 넘어가도 경고창이 뜨지 않습니다.
2.하이픈'-'을 넣어도 안넣어도 검증오류 없이 자동으로 붙습니다.
3.입력완료 후 다시 커서이동하였다 빠져도 경고창이 뜨지 않습니다.
4.전화번호 붙여넣기도 가능합니다.
5.추가 된 사항은 숫자 외의 문자 입력시 경고창 뜨고 포커스 다시 갑니다.

YEBdotKR님의 소스에 조금 더 추가해봤습니다.
$(document).on("keyup", ".phoneNumber", function() { $(this).val( $(this).val().replace(/[^0-9]/g, "").replace(/(^02|^0505|^1[0-9]{3}|^0[0-9]{2})([0-9]+)?([0-9]{4})/,"$1-$2-$3").replace("--", "-") ); });

출처: https://cublip.tistory.com/326 [HeBhy, since 1983.]

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

그누보드5 팁자료실

번호 제목 글쓴이 날짜 조회
공지 3년 전 조회 4,598
2741 3일 전 조회 111
2740 4일 전 조회 103
2739 1주 전 조회 209
2738 1주 전 조회 217
2737 1주 전 조회 181
2736 1주 전 조회 280
2735 3주 전 조회 281
2734 3주 전 조회 263
2733 1개월 전 조회 265
2732 1개월 전 조회 301
2731 1개월 전 조회 267
2730 1개월 전 조회 226
2729 1개월 전 조회 355
2728 1개월 전 조회 245
2727 1개월 전 조회 422
2726 1개월 전 조회 256
2725 1개월 전 조회 330
2724 1개월 전 조회 358
2723 1개월 전 조회 267
2722 1개월 전 조회 300
2721 1개월 전 조회 211
2720 2개월 전 조회 304
2719 2개월 전 조회 307
2718 2개월 전 조회 202
2717 2개월 전 조회 336
2716 2개월 전 조회 202
2715 2개월 전 조회 311
2714 2개월 전 조회 273
2713 2개월 전 조회 376
2712 2개월 전 조회 289
🐛 버그신고