■ 시간 자동 완성(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>시간 : </b>
<input type="time" value="00:00" onKeyup="inputTimeColon(this);" maxlength="5" style="text-align:center;width:40px;"/>
</body>
|
# 출력 결과
위와같이 숫자를 4자리수(HHMM)만 자동으로 입력하면 완성되고, 완성된 HH:MM형식으로 입력해도 자동으로 계산할 수 있게 되어있다.
