jquery 전화번호 하이픈 자동 넣기 질문좀 드리겠습니다...
본문
안녕하세요
요거보고 따라 넣었는데, 동작은 잘 됩니다..
그런데...
js 내용 --------------------------------------------------
(function($) {
$.fn.phoneInput1 = function() { //1번 function
function changeFormat(ref) {
var str = $(ref).val();
if (str.length > 13) {
str = str.substring(0, 13);
}
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 ref = this;
$(document).on('keyup', this, function(e) {
$(ref).val(changeFormat(ref));
});
}
})(jQuery);
(function($) {
$.fn.phoneInput2 = function() { //2번 function
function changeFormat(ref) {
var str = $(ref).val();
if (str.length > 13) {
str = str.substring(0, 13);
}
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 ref = this;
$(document).on('keyup', this, function(e) {
$(ref).val(changeFormat(ref));
});
}
})(jQuery);
(function($) {
$.fn.phoneInput3 = function() { //3번 function
function changeFormat(ref) {
var str = $(ref).val();
str = str.replace(/[^0-9]/g, '');
var tmp = '';
return str;
}
var ref = this;
$(document).on('keyup', this, function(e) {
$(ref).val(changeFormat(ref));
});
}
})(jQuery);
php 사용 --------------------------------------------------
<input type="text" id="phonenumber1">
<script>$('#phonenumber1').phoneInput1();</script>
<input type="text" id="phonenumber2">
<script>$('#phonenumber2').phoneInput2();</script>
<input type="text" id="phonenumber3">
<script>$('#phonenumber3').phoneInput3();</script>
이렇게 함수를 3개 사용하니, 한군데서 텍스트를 입력하면,
3개가 동시에 동작을 해버리네요.
잘 모르지만, document로 실행해서 그런것 같은데, 해결을 못하겠네요.
따로따로 ID당 한군데만 작동하게 할 수는 없을까요?
새벽까지 해메다 글 올려요~~^^
한 군대씩 개별로 동작할 수 있도록, 소스 수정 좀 부탁드립니다.
회원분들 모두 코로나 피해 없으시길 기원합니다~~^^
답변 3
phoneInput1()
phoneInput2()
phoneInput3()
이 동일한 동작을 하는 거라면 3개 만들 필요없 없을거 같은데요.
원본 파일 그대로 하시고
$("#phonenumber1").phoneInput();
$("#phonenumber2").phoneInput();
$("#phonenumber3").phoneInput();
이렇게 하시면 됩니다.
이런방식은 어떤가요
/* 화번호 및 휴대전화 자동하이픈 */
$(document).on("keyup", "#mb_tel,#mb_hp,#od_tel,#od_b_tel,#od_hp,#od_b_hp", function() {
$(this).val( $(this).val().replace(/[^0-9]/g, "").replace(/(^02|^0502|^0504|^0505|^0506|^0507|^1[0-9]{3}|^0[0-9]{2})([0-9]+)?([0-9]{4})/,"$1-$2-$3").replace("--", "-") );
});