Javascript) 시간입력(HH:MM) 시 자동으로 콜론(:) 넣는법 및 문자 작성방지

1. JSP 

 

<input id="" style="float : left"  onKeyup="inputTimeColon(this);" type="text" value="" maxlength ="5" >

 

 

2. JS

 

function inputTimeColon(time) {

    // 먼저 기존에 들어가 있을 수 있는 콜론(:)기호를 제거한다.
    var replaceTime = time.value.replace(/\:/g, "");
   
   
        var hours = replaceTime.substring(0, 2); // 2400->24
        var minute = replaceTime.substring(2, 4); 2400->00

        //isFinite()를 통해 숫자외 다른 문자가 들어갔는지 체크(문자열이 들어가면 false 값 출력)
        if(isFinite(hours + minute) == false) {
        	alert("문자는 입력하실 수 없습니다.");
            time.value = "09:00"; // 문자입력시 자동으로 09:00으로 값을 넣어준다.
            return false;
        }
    
    if(replaceTime.length >= 4) {
        // 콜론을 넣어 시간을 완성하고 반환한다.
        time.value = hours + ":" + minute; // EX) 2359를 입력시 23:59로 자동으로 콜론 생성
        
        // 시간은 24시를 넘을경우 00시 ㅇㅇ분으로 자동설정 2400입력시 00:00으로 변경
        if(hours + minute >= 2400) {
        	alert("시간은 23시59분을 넘길 수 없습니다.");
        	 time.value = "00:00";
            return false;
        }else if(minute >= 60) { // 분은 59분을 넘길 수 없다.
            alert("분은 59분을 넘길 수 없습니다.");
            time.value = hours + ":00";
            return false;
        }
    }
}

해당소스 그대로 복사하시면 사용가능합니다. 만약 더 기능을 추가하고싶으시면 if(replaceTime)부분에서 수정하시면 됩니다.