Javascript keyup 이벤트 시 전화번호에 실시간 하이픈 입력 (jquery 활용)

 

 

#1 HTML 코드

원하는 대로 작성한다.

기본적으로 input 태그만 사용해도 된다.

<input type="text" title="연락처" name="hpNo" id="hpNo">
<div> 
    <em id="hpNoCnt"></em>/13
</div>

 

 

 

 

#2 javascript 코드

자신이 입력한 텍스트가 총 몇 자인지 실시간으로 보여주고 싶다면

textMaxLengthCheck 함수를 함께 사용하고

이런 기능이 필요없다면 전화번호 세팅 코드만 사용하면 된다.

/**
 * 최대 글자수 실시간 체크 후 dispalyId 에 글자수 표시
 * @param str targetId(체크 대상)
 * @param int maxLength(최대 글자수)
 * @param str dispalyId(표시 대상)
 * 사용 안해도 됨
 */
function textMaxLengthCheck (targetId, maxLength, dispalyId) {
	let thisTxt = $(targetId).val();
	
	if (thisTxt.length > maxLength) {
		thisTxt = thisTxt.substring(0, maxLength);
		$(targetId).val(thisTxt);
	}

	$(dispalyId).html(thisTxt.length);
}
==========================================================================================
==========================================================================================
==========================================================================================

//전화번호 phoneNumberSet
$("#hpNo").on("keyup", function() {
    //최대 글자수 실시간 체크 optional
    textMaxLengthCheck("#hpNo", 13, "#hpNoCnt");
    
    
    //전화번호 세팅
    $(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("--", "-"));
});

 

 

 

Enjoy your life ~ !!!