[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형식으로 입력해도 자동으로 계산할 수 있게 되어있다.





저작자표시

'JavaScript' 카테고리의 다른 글

[JavaScript] 시간 자동 완성(HH:MM) 텍스트 박스  (0) 2018.01.11
[JavaScript] 함수 실행시 특정 value 값 전달하기  (0) 2017.02.28
[JavaScript] 동적 태그에서 스크립트 호출하기.  (0) 2016.05.26
[JavaScript] 다음 달(월) 구하기(일 수가 같아야 하는경우)  (0) 2015.11.03
[JavaScript] ReferenceError: '' is not defined 해결방법  (0) 2015.07.12
[JavaScript] 자료형 검사(typeof 연산자)  (0) 2015.06.21
트랙백 0개 , 댓글 0개
1 ··· 15 16 17 18 19 20 21 22 23 ··· 530