HTML DOM 비밀번호 입력 필드 autofocus 속성 완벽 정리

HTML DOM의 input Password autofocus 속성은 HTML <input> 요소의 autofocus 어트리뷰트와 연관된 속성입니다. 이 속성은 페이지가 로드될 때 비밀번호 입력 필드에 자동으로 포커스를 설정할지 여부를 확인하거나 지정하는 데 사용됩니다.

문법

autofocus 속성을 설정하는 기본 문법은 다음과 같습니다.

passwordObject.autofocus = true|false

true는 페이지 로드 시 비밀번호 필드가 자동으로 포커스를 받아야 함을 의미하고, false는 그렇지 않음을 의미합니다. 아무 값도 지정하지 않으면 기본적으로 false로 설정됩니다.

예제

Input Password autofocus 속성의 실제 동작을 확인할 수 있는 예제를 살펴보겠습니다.

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

실행 결과

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

HTML DOM 비밀번호 입력 필드 autofocus 속성 완벽 정리

여기서 CHECK FOCUS 버튼을 클릭하면 아래와 같이 autofocus 속성 값이 표시됩니다.

HTML DOM 비밀번호 입력 필드 autofocus 속성 완벽 정리

코드 설명

위 예제의 동작 원리를 단계별로 살펴보겠습니다.

먼저 type이 "password"이고 id가 "PASS"인 입력 필드를 생성했습니다. 이 필드에는 autofocus 어트리뷰트가 추가되어 있어 자동 포커스 기능이 활성화(true)된 상태입니다.

Password: <input type="password" id="PASS" autofocus>

그다음, 사용자가 클릭하면 FocusVal() 함수를 실행하는 CHECK FOCUS 버튼을 만들었습니다.

<button onclick="FocusVal()">CHECK FOCUS</button>

FocusVal() 함수는 getElementById() 메서드를 사용하여 type이 password인 input 요소에 접근하고, 해당 요소의 autofocus 속성 값을 읽어옵니다. autofocus 속성은 요소의 autofocus 어트리뷰트 설정 여부에 따라 true 또는 false를 반환합니다. 반환된 값은 변수 P에 저장된 후, innerHTML 속성을 통해 id가 "Sample"인 단락에 출력됩니다.

function FocusVal() {
    var P = document.getElementById("PASS").autofocus;
    document.getElementById("Sample").innerHTML = "The password field has autofocus property set to "+P;
}

활용 팁

autofocus 속성은 하나의 문서에서 한 번만 사용하는 것이 권장됩니다. 로그인 폼이나 검색창처럼 사용자가 페이지 진입 즉시 입력해야 하는 필드에 적용하면 불필요한 마우스 조작 없이 바로 타이핑할 수 있어 사용자 경험이 크게 향상됩니다. 또한 이 속성은 Chrome, Firefox, Safari, Edge 등 주요 최신 브라우저에서 모두 지원됩니다.