HTML DOM의 Input Datetime autofocus 속성은 웹 페이지가 처음 로드될 때 해당 날짜/시간 입력 필드(datetime)에 자동으로 포커스를 설정할지 여부를 지정하거나 현재 상태를 반환하는 데 사용됩니다. 이 속성을 활용하면 사용자가 별도로 클릭하지 않아도 즉시 입력 필드에 커서가 위치하도록 만들 수 있어, 폼 작성 편의성을 높이는 데 유용합니다.
문법(Syntax)
autofocus 속성의 기본 문법은 다음과 같습니다.
1. 현재 값 반환 (boolean 값)
inputDatetimeObject.autofocus
2. 자동 포커스 설정 (boolean 값 할당)
inputDatetimeObject.autofocus = booleanValue
Boolean 값 종류
여기서 booleanValue에 들어갈 수 있는 값은 다음 두 가지입니다.
| 값 | 설명 |
|---|---|
| true | 페이지 로드 시 해당 입력 필드에 자동으로 포커스가 설정됩니다. |
| false | 기본(default) 값이며, 입력 필드에 자동 포커스가 적용되지 않습니다. |
예제 코드
다음은 Input Datetime autofocus 속성의 실제 동작 예제입니다. 버튼을 클릭하면 자동 포커스가 해제되고, 화면에 현재 autofocus 상태가 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Datetime Autofocus</title>
</head>
<body>
Date & Time: <input type="datetime" id="Datetime" value="1998-04-09T12:48IST" autofocus>
<button onclick="removeAutoFocus()">Remove Auto Focus</button>
<div id="divDisplay"></div>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDatetime = document.getElementById("Datetime");
divDisplay.textContent = 'Autofocus: ' + inputDatetime.autofocus;
function removeAutoFocus() {
if(inputDatetime.autofocus == true){
inputDatetime.autofocus = false;
divDisplay.textContent = 'Autofocus: ' + inputDatetime.autofocus;
}
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'Remove Auto Focus' 버튼을 클릭하기 전 — datetime 입력 필드에 자동 포커스가 적용되어 있으며, 화면에는 Autofocus: true가 표시됩니다.
'Remove Auto Focus' 버튼을 클릭한 후 — autofocus 속성이 false로 변경되어 자동 포커스가 해제되며, 화면에는 Autofocus: false가 표시됩니다.
정리
autofocus 속성은 읽기와 쓰기가 모두 가능한 boolean 타입 속성으로, 초기 로드 시 입력 필드의 포커스 여부를 제어합니다. 참고로 HTML5 표준에서는 type="datetime" 대신 type="datetime-local" 사용이 권장되므로, 실무에서는 브라우저 호환성을 고려하여 적용하는 것이 좋습니다.