input에 전화번호 하이픈(-)넣기

전화번호를 입력할 때 숫자만 입력하면 하이픈(-)를 자동으로 표시되게 하려고 한다.

<input type="text"> 인 상태에서 숫자만 입력하게 하려고 했지만 한글은 문자로 인식하지 못해 걸러내지 못했다.
<input type="number">에서는 하이픈(-)와 같은 특수문자는 넣을 수 없다.

 

스크립트에서
focus일 때에는 number타입으로 숫자만 입력받을 수 있도록 하고,
focus out일 때에는 text타입으로 하이픈(-)을 추가할 수 있도록 하였다.

<input type="number" id="phone" placeholder="숫자만 입력해주세요." ng-focus="chkPhoneType('focus')" ng-blur="chkPhoneType('blur');" min="0" required>

 

$scope.chkPhoneType = function(type){
	var input = $("#phone").val();

//focus out인 경우 
//input type을 text로 바꾸고 '-'추가
	if(type == 'blur'){
		$("#phone").prop('type', 'text');
		var phone = chkItemPhone(input);
	}
	
//focus인 경우
//input type을 number로 바꾸고 '-' 제거
	if(type == 'focus'){
		var phone = input.replace( /-/gi, '');
		$("#phone").prop('type', 'number');
	}

	$("#phone").val(phone);
}

//전화번호 문자(-)
function chkItemPhone(temp) {
	var number = temp.replace(/[^0-9]/g, "");
	var phone = "";

	if (number.length < 9) {
		return number;
	} else if (number.length < 10) {
		phone += number.substr(0, 2);
        phone += "-";
        phone += number.substr(2, 3);
		phone += "-";
		phone += number.substr(5);
	} 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);
	}

	return phone;
}

See the Pen JjjNBYx by wonmi (@ellen_b) on CodePen.

// 화폐단위에 컴마(,)를 추가하는 경우에도 동일하게 사용할 수 있다.

 

 

 

/* ======== 2019-11-04 추가 =============*/

global version

<input type="number" id="phone" placeholder="숫자만 입력해주세요." ng-focus="chkPhoneType('focus', $event)" ng-blur="chkPhoneType('blur', $event);" min="0" required>

	$scope.chkPhoneType = function(type, e){
		var id = '#'+e.target.id;
		var input = $(id).val();

	//focus out인 경우 
	//input type을 text로 바꾸고 '-'추가
		if(type == 'blur'){
			$(id).prop('type', 'text');
			var phone = PhonNumStr(input);
		}
		
	//focus인 경우
	//input type을 number로 바꾸고 '-' 제거
		if(type == 'focus'){
			var phone = input.replace( /-/gi, '');
			$(id).prop('type', 'number');
		}

		$(id).val(phone);
	}