HTML DOM Input URL autofocus 속성 – 자동 포커스 설정 및 반환 방법

HTML DOM의 Input URL autofocus 속성은 페이지가 처음 로드될 때 URL 입력 필드(input type="url")에 자동으로 포커스가 설정되는지 여부를 설정하거나 반환하는 속성입니다. 이 속성을 활용하면 사용자가 별도의 클릭 없이 바로 URL을 입력할 수 있어 폼 사용성을 높일 수 있습니다.

문법(Syntax)

autofocus 속성의 기본 문법은 다음과 같습니다.

1. 불리언 값 반환하기

inputURLObject.autofocus

현재 요소의 autofocus 상태를 true 또는 false로 반환합니다.

2. autofocus 값 설정하기

inputURLObject.autofocus = booleanValue

불리언(Boolean) 값 종류

booleanValue에 사용할 수 있는 값은 아래와 같습니다.

값	설명
true	페이지가 로드될 때 해당 입력 필드에 자동으로 포커스가 설정됩니다.
false	기본값(default)이며, 입력 필드에 자동 포커스가 설정되지 않습니다.

예제(Example)

다음은 Input URL autofocus 속성의 실제 동작 예제입니다. 버튼을 클릭하면 자동 포커스가 제거되고, 현재 autofocus 상태가 화면에 표시됩니다.

<!DOCTYPE html>
<html>
<head>
<title>Input URL autofocus</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>URL-autofocus</legend>
<label for="URLSelect">URL :
<input type="url" id="URLSelect" placeholder="https://www.google.com" autofocus>
</label>
<input type="button" onclick="removeAutofocus()" value="Remove Autofocus">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputURL = document.getElementById("URLSelect");
    divDisplay.textContent = 'Autofocus: '+inputURL.autofocus;
    function removeAutofocus() {
        inputURL.autofocus = false;
        divDisplay.textContent = 'Autofocus: '+inputURL.autofocus;
    }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

'Remove Autofocus' 버튼을 클릭하기 전 – 페이지 로드 시 URL 입력 필드에 자동으로 커서가 위치하며, 화면에는 Autofocus: true가 표시됩니다.

HTML DOM Input URL autofocus 속성 – 자동 포커스 설정 및 반환 방법

'Remove Autofocus' 버튼을 클릭한 후 – autofocus 속성이 false로 변경되며, 화면에는 Autofocus: false로 갱신됩니다.

HTML DOM Input URL autofocus 속성 – 자동 포커스 설정 및 반환 방법

정리

autofocus 속성은 HTML에서 직접 지정할 수도 있지만, JavaScript를 통해 동적으로 값을 읽거나 변경할 수 있다는 점이 큰 장점입니다. 로그인 폼, 검색창 등 사용자 입력이 우선인 페이지에서 활용하면 접근성과 편의성을 동시에 개선할 수 있습니다.