전화번호 입력시 자동 하이픈(-) 붙이기 > 그누보드5 팁자료실

그누보드5 팁자료실

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

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

본문

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);" >

사용예)
*** 개인정보보호를 위한 전화번호 노출방지 *** = *** 개인정보보호를 위한 전화번호 노출방지 ***
*** 개인정보보호를 위한 전화번호 노출방지 *** = *** 개인정보보호를 위한 전화번호 노출방지 ***
*** 개인정보보호를 위한 전화번호 노출방지 *** = *** 개인정보보호를 위한 전화번호 노출방지 ***
*** 개인정보보호를 위한 전화번호 노출방지 *** = *** 개인정보보호를 위한 전화번호 노출방지 ***
*** 개인정보보호를 위한 전화번호 노출방지 *** = *** 개인정보보호를 위한 전화번호 노출방지 ***
*** 개인정보보호를 위한 전화번호 노출방지 *** = *** 개인정보보호를 위한 전화번호 노출방지 ***
*** 개인정보보호를 위한 전화번호 노출방지 *** = *** 개인정보보호를 위한 전화번호 노출방지 ***
15881234 = 1588-1234
등 서울번호 및 각지역번호 인터넷번호 가능


이정도는 다 아시겠지만..그래도 ..
추천
3

댓글 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.]
전체 2,427 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT