HTML DOM 입력 검색(Input Search) autofocus 속성 완벽 가이드

HTML DOM의 입력 검색(Input Search) autofocus 속성은 HTML <input> 요소의 autofocus 어트리뷰트와 연관된 속성입니다. 이 속성을 활용하면 웹 페이지가 로드될 때 검색 입력 필드(type="search")에 자동으로 포커스를 설정할지 여부를 지정하거나, 현재 설정 상태를 불러와 확인할 수 있습니다.

문법

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

searchObject.autofocus = true|false

true는 해당 검색 필드가 자동으로 포커스를 받아야 함을 의미하며, false는 포커스를 받지 않음을 의미합니다. 별도로 지정하지 않으면 기본값인 false로 설정됩니다.

예제

다음 예제를 통해 Input Search autofocus 속성이 실제로 어떻게 동작하는지 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h1>Input search autofocus property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" autofocus>
</form>
<p>Get the autofocus attribute value for the above search field by clicking the below button.</p>
<button type="button" onclick="FocusVal()">CHECK FOCUS</button>
<p id="Sample"></p>
<script>
    function FocusVal() {
        var R = document.getElementById("SEARCH1").autofocus;
        document.getElementById("Sample").innerHTML = "The search field has autofocus property set to "+R;
}
</script>
</body>
</html>

출력 결과

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

HTML DOM 입력 검색(Input Search) autofocus 속성 완벽 가이드

CHECK FOCUS 버튼을 클릭하면 아래 그림처럼 autofocus 속성 값이 화면에 표시됩니다.

HTML DOM 입력 검색(Input Search) autofocus 속성 완벽 가이드

코드 분석

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

먼저 type="search", id="SEARCH1", name="fruits"로 지정된 <input> 요소를 생성하고 autofocus 어트리뷰트를 true로 설정했습니다. 이 검색 필드는 form 태그 안에 위치합니다.

<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" autofocus>
</form>

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

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

FocusVal() 함수는 getElementById() 메서드를 사용해 type이 search인 입력 요소를 가져온 뒤, 해당 요소의 autofocus 속성 값을 읽어옵니다. autofocus 속성은 검색 필드의 autofocus 어트리뷰트 설정에 따라 true 또는 false를 반환하며, 이 값은 변수 f에 저장된 후 innerHTML 속성을 통해 id가 "Sample"인 단락에 출력됩니다.

function FocusVal(){
    var f = document.getElementById("SEARCH1").autofocus;
    document.getElementById("Sample").innerHTML = "The search field autofocus property is set to: "+f;
}

참고로 autofocus 어트리뷰트는 페이지가 처음 로드될 때 한 번만 적용되므로, 동적으로 포커스를 이동시키고 싶다면 JavaScript의 focus() 메서드를 함께 활용하는 것이 좋습니다.