HTML DOM 입력 텍스트 autofocus 속성 – 페이지 로드 시 자동 포커스 설정 방법

HTML DOM의 input text autofocus 속성은 HTML <input> 요소의 autofocus 특성과 연결된 속성입니다. 이 속성을 사용하면 페이지가 로드될 때 해당 텍스트 입력 필드가 자동으로 포커스를 받아야 하는지 여부를 설정하거나 현재 상태를 확인할 수 있습니다.

예를 들어 로그인 폼이나 검색창처럼 사용자가 즉시 입력을 시작해야 하는 화면에서는 autofocus 속성이 매우 유용합니다.

문법(Syntax)

autofocus 속성 설정

textObject.autofocus = true|false

true는 해당 텍스트 필드가 포커스를 가져야 함을 의미하고, false는 그렇지 않음을 의미합니다. 기본값은 false입니다.

예제(Example)

다음은 HTML DOM Input text autofocus 속성의 사용 예제입니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input text autofocus property</h1>
USERNAME: <input type="text" id="TEXT1" autofocus>
<br><br>
<button onclick="FocusVal()">CHECK FOCUS</button>
<p id="Sample"></p>
<script>
    function FocusVal() {
        var P = document.getElementById("TEXT1").autofocus;
        document.getElementById("Sample").innerHTML = "The text field has autofocus property set to "+P;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

HTML DOM 입력 텍스트 autofocus 속성 – 페이지 로드 시 자동 포커스 설정 방법

정리

autofocus 속성은 불리언(Boolean) 값으로 동작하며, HTML에서 <input type="text" autofocus>처럼 마크업에 직접 지정하거나 JavaScript로 동적으로 제어할 수 있습니다. 다만 한 페이지에서 여러 요소에 autofocus를 지정하면 첫 번째 요소만 적용되므로 주의해야 하며, 접근성 측면에서도 의도치 않은 포커스 이동이 스크린 리더 사용자에게 혼란을 줄 수 있으므로 필요한 경우에만 신중하게 사용하는 것이 좋습니다.