JavaScript 날짜,전화번호 입력제어 공통함수

웹사이트에서 입력값을 받을 때 빠질 수 없는 게 날짜와 전화번호입니다

전화번호나 날짜 입력 시에 하이픈(-) 은 빠질 수 없는데요

 

오늘은 숫자만 입력받고  하이픈(-) 등 특수문자가 자동으로 입력이 되도록 입력창을 제어하는 용도로

공통 함수를 작성하려 합니다

날짜나 전화번호 입력받을 때 유용하게 사용될 거라 생각이 듭니다

 

자바스크립트 본문입니다

function numberOnlyInput(obj, mark, index1, index2) {
	/****************************************************************************
    숫자만 입력가능하게하고 원하는 위치에 마크를 추가하게 한다 [전화번호, 날짜 등]
    obj = 값이 들어가야할 Element
    mark = 원하는 마크
    index1 = 마크가 들어가야할 첫번째 위치
    index2 = 마크가 들어가야할 두번째 위치 (없다면 입력하지 않아도 됨)
    ****************************************************************************/
    
    var number = obj.value.replace(/[^0-9]/g, "");
    var str = "";
    //console.log(index1);
    //console.log(index2);
    
    if(index1 != null && index2 == null) { // index가 1개일때
    	if(number.length < index1) {
        	str = number;
        } else if(numnber.length >= index1) {
        	str += number.substring(0, index1-1);
            str += mark;
            str += number.substr(index1-1);
        }
    }
    else if(index != null && index2 != null) { // index가 2개일때
    	if(number.length < index1) {
        	str = number;
        } else if(number.length < index2) {
        	str += number.substring(0, index1-1);
            str += mark;
            str += number.substr(index1-1);
        } else {
        	str += number.substring(0, index1-1);
            str += mark;
            str += number.substring(index1-1, index2-1);
            str += mark;
            str += number.substr(index2-1);
        }
    }
    obj.value = str;
}

---

다음은 HTML 부분입니다

<input type="text" onkeyup="numberOnlyInput(this, '-', 5, 7);" maxlength = "10">

날짜 형식(YYYY-MM-DD)으로 입력 제어하기 위해 5번째, 7번째에 하이픈(-)이 들어가게 작성했습니다

아주 잘 작동되고 있습니다^^

 

다음은 전화번호 입력창에 입력 제어할 때에 상황입니다

<input type="text" onkeyup="numberOnlyInput(this, '-', 4, 8);" maxlength="13">

전화번호 형식(000-0000-0000)으로 입력 제어하기 위해 4번째, 8번째에 하이픈(-)이 들어가게 수정했습니다

아주 잘 작동이 됩니다~!

 

이 코드는 원하는 곳에 특수문자를 넣을 수 있게끔 해놔서

전화번호 , 날짜뿐 아니라 원하는 상황에 맞춰 쓸 수 있어 활용성이 높으리라 생각이 됩니다~^^

 

 

 

 

내용이 마음에 드신다면 공감(♡)을 눌러주세요.
로그인하지 않으셔도 가능합니다~ 감사합니다!