HTML DOM의 Button autofocus 속성은 <button> 요소의 autofocus 속성과 연결된 기능입니다. 이 속성은 웹 페이지가 로드될 때 해당 버튼이 자동으로 포커스(focus)를 받을지 여부를 지정하는 데 사용됩니다.
문법(Syntax)
버튼의 autofocus 속성을 설정하는 문법은 다음과 같습니다.
buttonObject.autofocus = true|false
여기서 true|false 값은 페이지가 로드될 때 해당 입력 버튼이 포커스를 받을지 여부를 결정합니다.
- true − 입력 버튼이 포커스를 받습니다.
- false − 입력 버튼이 포커스를 받지 않습니다.
예제(Example)
HTML DOM 버튼 autofocus 속성의 실제 사용 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<button type="button" id="MyButton" autofocus>BUTTON</button>
<p>아래 버튼을 클릭하면 위의 입력 버튼이 페이지 로드 시 자동으로 포커스를 받는지 확인할 수 있습니다</p>
<button onclick="buttonFocus()">CLICK IT</button>
<p id="Sample"></p>
<script>
function buttonFocus() {
var x = document.getElementById("MyButton").autofocus;
if(x==true)
document.getElementById("Sample").innerHTML="The input button does get focus on page load";
else
document.getElementById("Sample").innerHTML="The input button does not get focus on page load";
}
</script>
</body>
</html>출력(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
CLICK IT 버튼을 클릭하면 아래와 같은 결과가 표시됩니다.
예제 코드 분석
위 예제의 동작 원리를 단계별로 살펴보겠습니다.
먼저, id가 “MyButton”인 버튼에 autofocus 속성을 활성화하여 생성합니다.
<button type="button" id="MyButton" autofocus>BUTTON</button>
그다음, 클릭 시 buttonFocus() 함수를 실행하는 CLICK IT 버튼을 배치합니다.
<button onclick="buttonFocus()">CLICK IT</button>
buttonFocus() 함수는 getElementById() 메서드를 사용하여 해당 버튼 요소를 가져온 뒤, 그 버튼의 autofocus 값을 불러옵니다. 이 값은 Boolean(참/거짓) 타입이며, 변수 x에 할당됩니다. 이후 조건문(if~else)을 통해 autofocus 값이 true인지 false인지 판별하고, 그 결과에 맞는 텍스트를 id가 “Sample”인 <p> 요소에 출력합니다.
function buttonFocus() {
var x = document.getElementById("MyButton").autofocus;
if(x==true)
document.getElementById("Sample").innerHTML="The input button does get focus on page load";
else
document.getElementById("Sample").innerHTML="The input button does not get focus on page load";
}마무리
autofocus 속성은 사용자가 별도의 클릭 없이 특정 버튼에 즉시 입력하거나 조작할 수 있도록 도와주는 유용한 기능입니다. 다만 한 페이지에서 autofocus는 하나의 요소에만 적용하는 것이 좋으며, 접근성(accessibility) 측면에서 의도치 않게 포커스가 이동해 혼란을 줄 수 있으므로 신중하게 사용하는 것이 권장됩니다.