만들어가는 세상

[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>
결과값

'IT > JAVASCRIPT' 카테고리의 다른 글

[JAVASCRIPT] 시(hour)분(minute)초(second) 를 "초"로 포맷 변경  (0) 2020.04.20
[JAVASCRIPT] Null check 빈 값 체크 로직 공통 처리하면 유용 합니다.  (0) 2020.03.05
[JAVASCRIPT] tui-editor plugin js, css 적용 및 에디터 사용방법  (2) 2019.12.24
[JAVASCRIPT] 게시판 List SORT 정렬 처리방법  (0) 2019.12.06
[JAVASCRIPT] masonry를 활용하여 더 보기 기능 구현  (0) 2019.11.26
'IT/JAVASCRIPT' Related Articles more
Comments