[JavaScript] 시간 자동 완성(HH:MM) 텍스트 박스

JavaScript 2018. 1. 11. 09:53


시간 자동 완성(HH:MM) 텍스트 박스



 -. 텍스트 박스에 시간 기능을 입력하는데 시간을 HH:MM 으로 정리해서 자동으로 들어가고 보여지게 하기위하여 제작했다.

 -. HTML5의 <input type="time">과의 병행은 안되었다.



# 소스 코드

 time_colon.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>자바스크립트::시간 자동 완성(HH:MM)</title>
<script type="text/javascript">
    function inputTimeColon(time) {

        // 먼저 기존에 들어가 있을 수 있는 콜론(:)기호를 제거한다.
        var replaceTime = time.value.replace(/\:/g, "");

        // 글자수가 4 ~ 5개 사이일때만 동작하게 고정한다.
        if(replaceTime.length >= 4 && replaceTime.length < 5) {

            // 시간을 추출
            var hours = replaceTime.substring(0, 2);

            // 분을 추출
            var minute = replaceTime.substring(2, 4);

            // 시간은 24:00를 넘길 수 없게 세팅
            if(hours + minute > 2400) {
                alert("시간은 24시를 넘길 수 없습니다.");
                time.value = "24:00";
                return false;
            }

            // 분은 60분을 넘길 수 없게 세팅
            if(minute > 60) {
                alert("분은 60분을 넘길 수 없습니다.");
                time.value = hours + ":00";
                return false;
            }

            // 콜론을 넣어 시간을 완성하고 반환한다.
            time.value = hours + ":" + minute;
        }
    }
</script>
<body>
    <b>시간&nbsp;:&nbsp;</b>
    <input type="time" value="00:00" onKeyup="inputTimeColon(this);" maxlength="5" style="text-align:center;width:40px;"/>
</body>



# 출력 결과




위와같이 숫자를 4자리수(HHMM)만 자동으로 입력하면 완성되고, 완성된 HH:MM형식으로 입력해도 자동으로 계산할 수 있게 되어있다.