[JavaScript] 시간(HH:MM)만을 입력하는 텍스트 박스[JavaScript] 시간(HH:MM)만을 입력하는 텍스트 박스

Posted at 2018. 8. 17. 17:57 | Posted in JavaScript & jQuery/JavaScript
반응형




■ 텍스트 박스에 시간 입력시 콜론(HH:MM) 자동 삽입




jQuery 캘린더와 같이 jQuery모듈들 중에도 시간을 선택하게 해주는 모듈들이 상당히 있었으나.

분단위를 세세하게 지정하기 힘든등의 무언가 마음에 들지 않는 부분들이 있어 제작하게 되었다.

HHMM 식으로 콜론없이 쭉 4개의 숫자를 자동으로 입력하면 HH:MM형식으로 숫자가 자동으로 기입되는 그런 구조이다.



# 소스코드

<html>
<head>
<title>:: 시간 자동 콜론 삽입(HH:MM) ::</title>
<style type="text/css">
    .timeBox {
        text-align:center;
        width:60px;    
    }
</style>
<script type="text/javascript">
    function inputTimeColon(time) {


        // replace 함수를 사용하여 콜론( : )을 공백으로 치환한다.
        var replaceTime = time.value.replace(/\:/g, "");


        // 텍스트박스의 입력값이 4~5글자 사이가 되는 경우에만 실행한다.
        if(replaceTime.length >= 4 && replaceTime.length < 5) {

            var hours = replaceTime.substring(0, 2);      // 선언한 변수 hours에 시간값을 담는다.
            var minute = replaceTime.substring(2, 4);    // 선언한 변수 minute에 분을 담는다.


            // isFinite함수를 사용하여 문자가 선언되었는지 확인한다.
            if(isFinite(hours + minute) == false) {
                alert("문자는 입력하실 수 없습니다.");
                time.value = "00:00";
                return false;
            }


            // 두 변수의 시간과 분을 합쳐 입력한 시간이 24시가 넘는지를 체크한다.
            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>
</head>
<body>
    <h2>시간을 입력해 주세요</h2>

    <!-- maxlength의 값을 5로지정하여 다섯자리 이상의 값이 등록되는것을 막는다. -->

    <input type="text" class="timeBox" onKeyup="inputTimeColon(this);" placeholder="HH:MM" maxlength="5"/>
</body>
</html>




# 출력결과 - 정상적인 시간을 입력한 경우







# 예외처리① - 문자를 입력한 경우




# 예외처리② - 24시를 넘긴 시간을 입력한 경우




# 예외처리③ - 60분을 넘긴 시간을 입력한 경우







반응형
저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] Session 데이터 읽고, 쓰기  (0) 2018.09.04
[JavaScript] Cookie 생성, 삭제 및 읽어오기  (4) 2018.09.03
[JavaScript] 전화번호 Hyphen(-)기호 자동 삽입  (7) 2018.08.21
[JavaScript] 천단위 이상의 입력값에 자동콤마( , ) 삽입  (0) 2018.08.20
[JavaScript] 카드번호 입력폼 예제  (0) 2018.04.18
//

티스토리툴바