input에 전화번호를 넣었을때 하이픈 넣는 질문드립니다.
본문
<input type='text' name='info' placeholder='아이디 또는 전화번호' autocomplete='off' onKeyup='inputPhoneNumber(this);' />
<script type="text/javascript">
function inputPhoneNumber(obj) {
var number = obj.value.replace(/[^0-9]/g, "");
var phone = ""; if(number.length < 4) { return number;
} else if(number.length < 7) {
phone += number.substr(0, 3); phone += "-"; phone += number.substr(3);
} else if(number.length < 11) {
phone += number.substr(0, 3); phone += "-"; phone += number.substr(3, 3); phone += "-"; phone += number.substr(6);
} else {
phone += number.substr(0, 3); phone += "-"; phone += number.substr(3, 4); phone += "-"; phone += number.substr(7);
} obj.value = phone; }
</scrtip>
이렇게 input에 숫자를 넣으면 하이픈을 자동으로 입력하게 만들었습니다.
그런데, 아이디와 전화번호를 같이 넣고 싶어서
글자가 들어갔을때는 저 함수를 작동시키지 않고 싶어서 질문드립니다.
어떻게 짜야할까요ㅠㅠ
답변 1
핸드폰 번호 사이 하이픈 삽입을 아래와 같이 변경 하시면 좀더 코드가 간결해지실겁니다.
function inputPhoneNumber(obj) {
const hp_pattern = /(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/; // 핸드폰번호 패턴
let regexAllCase = new RegExp(number_pattern, "gi"); // 대소문자 구분 없이 모든 패턴을 찾음
const update_mb_hp = obj.value.replace(regexAllCase, ''); // 숫자를 제외한 모든 문자 삭제
const phone = update_mb_hp.replace(hp_pattern , "$1-$2-$3" );
}
그 후에 obj != update_mb_hp 이 다르다면 글자가 들어왔다고 판단하고 값을 넘기면 될듯합니다.
function inputPhoneNumber(obj) {
const hp_pattern = /(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/; // 핸드폰번호 패턴
let regexAllCase = new RegExp(number_pattern, "gi"); // 대소문자 구분 없이 모든 패턴을 찾음
const update_mb_hp = obj.value.replace(regexAllCase, '');
if (obj != update_mb_hp) {
return obj;
}
const phone = update_mb_hp.replace(hp_pattern , "$1-$2-$3" );
return phone ;
}
이상하게 콘솔창에
Uncaught ReferenceError: number_pattern is not defined
at inputPhoneNumber (1.html:17)
at HTMLInputElement.onkeyup (1.html:11)
오류가 뜨면서 작동이 안되네요ㅜㅜ
hp_pattern로 바꿔쓰시면됩니다
제가 초보자라서요ㅠㅠ 정말 모르겠어서 죄송하게도 여쭤봅니다.
어디를 hp_pattern 로 바꿔써야 할까요?ㅜㅜ
const hp_pattern = /(^02.{0}|^01.{1}|[0-9]{3})([0-9]+)([0-9]{4})/; // 핸드폰번호 패턴
const number_pattern = /\D/; // /[^0-9]/g 와 같은 표현
number_pattern 이거 추가 해주세요 제가 빼먹었어요 ㅠㅠ
