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

1. 텍스트 박스에 시간을 HH:MM 형태로 입력하는것을 자동으로 형식을 맞춰주고 잘못된 입력에 대한 예외처리를 하기 위함.

2. HTML5의 <input type="time"> 은 미 사용

<input type="time" value="00:00" onkeyup="inputTimeColon(this);" maxlength="5" style="text-align:center;width:40px;">
<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);  // 분을 추출

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

            if(hours + minute < 0) {
                alert("잘못된 시간입니다.");
                time.value = "00:00";
                return false;
            }

            if(minute > 60) {
                alert("분은 60분을 넘길 수 없습니다.");
                time.value = hours + ":00";
                return false;
            }
   
            // 시간을 완성하고 반환한다.
            time.value = hours + ":" + minute;
        }
}
</script>