HTML DOM의 Input Color autofocus 속성은 웹 페이지가 처음 로드될 때 색상 선택 입력 필드(Input Color)에 자동으로 포커스를 설정할지 여부를 지정하거나 현재 상태를 반환하는 속성입니다.
문법(Syntax)
autofocus 속성의 기본 문법은 다음과 같습니다.
1. 값 반환하기 (boolean 값)
inputColorObject.autofocus
이 코드는 해당 입력 필드의 autofocus 설정 상태를 true 또는 false로 반환합니다.
2. 값 설정하기
inputColorObject.autofocus = booleanValue
booleanValue 값의 종류
설정할 수 있는 boolean 값은 아래와 같습니다.
| booleanValue | 설명 |
|---|---|
| true | 페이지가 로드될 때 해당 입력 필드가 자동으로 포커스를 받습니다. |
| false | 기본값(default)이며, 입력 필드는 자동으로 포커스되지 않습니다. |
예제(Example)
다음은 Input Color autofocus 속성을 활용한 실제 예제입니다. 버튼을 클릭하면 자동 포커스 설정이 해제되고, 화면에 현재 autofocus 상태가 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Color Autofocus</title>
</head>
<body>
Color Picker: <input type="color" id="Color" autofocus>
<button onclick="removeAutoFocus()">자동 포커스 해제</button>
<div id="divDisplay"></div>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputColor = document.getElementById("Color");
divDisplay.textContent = 'Autofocus: ' + inputColor.autofocus;
function removeAutoFocus() {
if(inputColor.autofocus == true){
inputColor.autofocus = false;
divDisplay.textContent = 'Autofocus: ' + inputColor.autofocus;
}
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
'자동 포커스 해제' 버튼을 클릭하기 전 − autofocus 속성이 true로 설정되어 있어 페이지 로드 시 색상 선택기에 포커스가 자동으로 적용됩니다.
'자동 포커스 해제' 버튼을 클릭한 후 − autofocus 속성이 false로 변경되며, 화면에 표시되는 상태값도 함께 갱신됩니다.
정리
autofocus 속성은 HTML 태그에 직접 지정할 수도 있지만, JavaScript를 통해 동적으로 값을 읽거나 변경할 수 있다는 점이 큰 장점입니다. 이를 활용하면 사용자의 행동에 따라 특정 입력 필드로 포커스를 유도하는 등 더욱 유연한 폼 UX를 구현할 수 있습니다.