개요
HTML DOM의 Input Date autofocus 속성은 웹 페이지가 처음 로드될 때 날짜 입력 필드(<input type="date">)에 자동으로 포커스를 설정할지 여부를 지정하거나, 현재 설정 상태를 반환하는 속성입니다. 이 속성을 활용하면 사용자가 별도로 클릭하지 않아도 즉시 날짜를 선택할 수 있어 사용자 경험을 개선할 수 있습니다.
구문
autofocus 속성의 기본 구문은 다음과 같습니다.
1. 현재 값 반환 (불리언 값)
inputDateObject.autofocus
2. autofocus 값 설정
inputDateObject.autofocus = booleanValue
불리언 값(Boolean Value)
booleanValue에는 아래 두 가지 값을 사용할 수 있습니다.
| booleanValue | 설명 |
|---|---|
| true | 페이지가 로드될 때 해당 입력 필드에 자동으로 포커스가 설정됩니다. |
| false | 기본값이며, 자동 포커스가 적용되지 않습니다. |
예제
다음은 Input Date autofocus 속성을 활용한 실제 예제 코드입니다. 버튼을 클릭하면 자동 포커스가 해제되고, 현재 autofocus 상태가 화면에 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Date Autofocus</title>
</head>
<body>
Date Select: <input type="date" id="Date" autofocus>
<button onclick="removeAutoFocus()">Remove Auto Focus</button>
<div id="divDisplay"></div>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDate = document.getElementById("Date");
divDisplay.textContent = 'Autofocus: ' + inputDate.autofocus;
function removeAutoFocus() {
if(inputDate.autofocus == true){
inputDate.autofocus = false;
divDisplay.textContent = 'Autofocus: ' + inputDate.autofocus;
}
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'Remove Auto Focus' 버튼을 클릭하기 전 − autofocus 속성이 true로 설정되어 있어 페이지 로드 시 날짜 입력 필드에 포커스가 자동으로 맞춰집니다.
'Remove Auto Focus' 버튼을 클릭한 후 − autofocus 속성이 false로 변경되어 더 이상 자동 포커스가 적용되지 않으며, 화면에도 변경된 상태가 표시됩니다.
