HTML DOM input month 자동 포커스(autofocus) 속성 완벽 정리

HTML DOM의 input month 자동 포커스(autofocus) 속성은 웹 페이지가 로드될 때 월(month) 입력 필드에 자동으로 포커스를 설정할지 여부를 확인하거나 변경하는 데 사용되는 속성입니다.

기본 문법(Syntax)

autofocus 속성은 아래와 같은 방식으로 사용할 수 있습니다.

1. autofocus 값 반환하기

object.autofocus

현재 해당 입력 필드에 autofocus 속성이 적용되어 있는지 여부를 불리언(Boolean) 값으로 반환합니다.

2. autofocus 값 설정하기

object.autofocus = true | false

true로 설정하면 페이지 로드 시 해당 필드에 포커스가 지정되고, false로 설정하면 자동 포커스가 비활성화됩니다.

실전 예제 코드

아래는 HTML DOM input month autofocus 속성을 활용한 예제입니다. 버튼을 클릭하면 월 입력 필드의 자동 포커스가 해제됩니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM autofocus 속성 예제</title>
<style>
    body{
        text-align:center;
    }

    p{
        font-size:1.5rem;
        color:#ff8741;
    }

    button{
        background-color:#db133a;
        color:#fff;
        padding:8px;
        border:none;
        width:120px;
        margin:0.5rem;
        border-radius:50px;
        outline:none;
        cursor:pointer;
    }
</style>
</head>
<body>
<h1>autofocus 속성 예제</h1>
<p>안녕하세요! Disable 버튼을 클릭하면 자동 포커스가 해제됩니다.</p>
<input type="month" autofocus value="2019-03">
<br>
<button onclick="disable()">Disable</button>
    <script>
        function disable() {
            document.querySelector("input").autofocus = false;
        }
    </script>
</body>
</html>

실행 결과(Output)

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

HTML DOM input month 자동 포커스(autofocus) 속성 완벽 정리

페이지가 로드되면 type="month" 입력 필드에 자동으로 포커스가 설정된 것을 확인할 수 있습니다.

여기서 “Disable” 버튼을 클릭하면, JavaScript 함수가 실행되어 월 입력 필드의 autofocus 속성이 false로 변경되며 자동 포커스 기능이 비활성화됩니다.

HTML DOM input month 자동 포커스(autofocus) 속성 완벽 정리

정리

autofocus 속성은 페이지 로드 시 입력 필드에 자동으로 커서를 위치시키는 기능을 제어합니다.
object.autofocus로 현재 상태를 확인할 수 있으며, true 또는 false 값을 할당해 동적으로 변경할 수 있습니다.
사용자 경험(UX) 측면에서 검색창이나 특정 입력이 우선적으로 필요한 폼에서 유용하게 활용됩니다.