[Javascript] input 입력시 숫자/날짜 포맷팅

input에 값을 입력할 때 자동으로 포맷팅 해주는 함수들이다.

사용시 onkeyup이나 oninput 속성을 넣어준다.

 

1. 숫자포맷 : 4자리수 이상의 숫자를 입력하면 콤마를 붙여준다

2. 전화번호 : 02, 010~019 - 숫자 3자리 혹은 4자리 - 숫자 4자리로 포맷팅해준다

3. 날짜포맷 : 연 4자리, 월 2자리, 일 2자리로 변환한다 (자릿수에 따라 하이픈을 붙여준다)

4. 시간포맷 : 시 2자리 : 분 2자리 : 초 2자리로 변화한다 (날짜 포맷과 같음)

// 숫자 포맷 1,234
function inputNumberFormat(obj) {
    obj.value = obj.value.replace(/[^\d]+/g, '').replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
}

// 전화번호 
function inputPhoneNumberFormat(obj) {
    obj.value = obj.value.replace(/[^\d]+/g, '').replace(/(^02.{0}|^01.{1}|[0-9]{3,4})([0-9]{3,4})([0-9]{4})/g, "$1-$2-$3");
}

// 날짜 포맷 yyyy-mm-dd
function inputDateFormat(obj) {
    // 사용자 입력값은 모두 숫자만 받는다.(나머지는 ""처리)
    let val = obj.value.replace(/\D/g, "");
    let leng = val.length;

    // 출력할 결과 변수
    let result = '';

    if (leng == 0) {
        result = '';
    } else if (leng < 5) {
        result = val;
    } else if (leng == 5 || leng == 6) {
        result = val.substring(0,4) + '-' + val.substring(4,6);
    } else {
        result = val.substring(0,4) + '-' + val.substring(4,6) + '-' + val.substring(6,8);
    }
    obj.value = result;
}

// 시간 포맷 hh:mm:ss
function inputTimeFormat(obj) {
    let val = obj.value.replace(/\D/g, "");
    let leng = val.length;

    // 출력할 결과 변수
    let result = '';

    if (leng == 0) {
        result = '';
    }else if (leng == 1 || leng == 2) {
        result = val;
    } else if (leng == 3 || leng == 4) {
        result = val.substring(0,2) + ':' + val.substring(2,4);
    } else {
        result = val.substring(0,2) + ':' + val.substring(2,4) + ':' + val.substring(4,6);
    }
    obj.value = result;
}