HTML DOM의 input range autofocus 속성은 HTML <input> 요소의 autofocus 어트리뷰트와 연결된 기능입니다. 이 속성을 사용하면 웹 페이지가 로드될 때 해당 범위(range) 슬라이더가 자동으로 포커스를 받아야 하는지 여부를 설정하거나 현재 상태를 반환할 수 있습니다.
문법(Syntax)
autofocus 속성을 설정하는 기본 문법은 다음과 같습니다.
rangeObject.autofocus = true|false
true는 해당 범위 슬라이더가 자동으로 포커스를 받도록 지정하는 값이며, false는 그 반대의 경우입니다. 아무것도 지정하지 않으면 기본값은 false로 설정됩니다.
예제 코드
Input range autofocus 속성의 실제 동작을 확인할 수 있는 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input range autofocus property</h1>
<form>
<input type="range" id="RANGE1" name="VOL" autofocus>
</form>
<br>
<button type="button" onclick="rangeFocus()">CHECK</button>
<p id="Sample"></p>
<script>
function rangeFocus() {
var R = document.getElementById("RANGE1").autofocus;
document.getElementById("Sample").innerHTML = "The autofocus property is set to: "+R;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CHECK 버튼을 클릭하면 아래와 같이 autofocus 속성의 현재 값이 화면에 표시됩니다.
코드 상세 분석
위 예제의 핵심 부분을 단계별로 살펴보겠습니다.
1. 범위 입력 필드 생성
form 요소 안에 type="range", id="RANGE1", name="VOL"로 지정된 입력 필드를 생성했습니다. 이 요소에는 autofocus 어트리뷰트가 활성화되어 있어(즉, true 상태) 페이지 로드 시 자동으로 포커스를 받게 됩니다.
<form> <input type="range" id="RANGE1" name="VOL" autofocus> </form>
2. CHECK 버튼 생성
사용자가 클릭하면 rangeFocus() 함수를 실행하는 버튼을 만들었습니다.
<button type="button" onclick="rangeFocus()">CHECK</button>
3. rangeFocus() 함수 동작
rangeFocus() 함수는 getElementById() 메서드를 사용해 type이 range인 입력 요소에 접근한 뒤, 해당 요소의 autofocus 속성 값을 가져옵니다. 이 속성은 범위 슬라이더의 autofocus 어트리뷰트 값에 따라 true 또는 false를 반환합니다. 반환된 값은 변수 R에 저장되고, innerHTML 속성을 통해 id가 "Sample"인 단락(<p>)에 출력됩니다.
function rangeFocus() {
var R = document.getElementById("RANGE1").autofocus;
document.getElementById("Sample").innerHTML = "The autofocus property is set to: "+R;
}정리
HTML DOM의 input range autofocus 속성은 페이지 로드 시 특정 슬라이더에 자동으로 포커스를 부여해야 하는지 제어하는 간단하지만 유용한 기능입니다. 불린(Boolean) 값인 true 또는 false로 설정되며, JavaScript를 통해 언제든지 현재 상태를 읽어오거나 변경할 수 있습니다. 폼 사용성을 개선하고 싶다면 autofocus 속성을 적극적으로 활용해 보시기 바랍니다.