[JAVASCRIPT] 생년(YYYY) 입력 시 나이 자동 계산 && 나이 입력 시 생년(YYYY) 구하기

IT/JAVASCRIPT

[JAVASCRIPT] 생년(YYYY) 입력 시 나이 자동 계산 && 나이 입력 시 생년(YYYY) 구하기

윤재웅 2020. 4. 20. 20:00

생년(YYYY) 입력 시 나이 값 자동 계산하는 로직입니다. 반대로 나이 입력 시 생년(YYYY) 처리하는 로직 입니다.

<html>
    <div>
        <label >생년</label>
        <div>
            <input type="text" maxlength="4" onKeyup="this.value=this.value.replace(/[^0-9]/g,''); 
                inpuformattingAge(this);" name="perfomBirth" >
        </div>
        <label >나이</label>
        <div>
            <input type="text" maxlength="3" onKeyup="this.value=this.value.replace(/[^0-9]/g,''); 
                inpuformattingBirth(this);" name="perfomAge">
        </div>
    </div>
</html>

script 로직 입니다.

<script src="https://code.jquery.com/jquery-3.5.0.min.js" 
    integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
    <script type="text/javascript">

        function inpuformattingAge(birth) {
            var num = birth.value.toString();
            var numDigit = num.length;

            if(numDigit == 4 ){
                var date = new Date();
                var year = date.getFullYear();

                if(birth.value*1 > year){
                    alert("현재 년도보다 작은 값을 입력해주세요.");
                    $(':input[name=perfomBirth]').val('');
                    $(':input[name=perfomBirth]').focus(); 
                    return;
                }else{
                    $(':input[name=perfomAge]').val(year - birth.value*1);
                }
            }
        } 

        function inpuformattingBirth(age) {
            var num = age.value.toString();
            var numDigit = num.length;

            if(numDigit <= 3 ){
                var date = new Date();
                var year = date.getFullYear();
                $(':input[name=perfomBirth]').val(year - age.value*1);
            }
        } 

        function isEmpty(string){
          return string !== null && string !== undefined && string !== "";
        }
    </script>

결과값