HTML DOM의 input number autofocus 속성은 페이지가 로드될 때 숫자(number) 타입의 입력 필드에 자동으로 포커스를 설정할지 여부를 확인하고 변경하는 데 사용됩니다. 이 속성을 활용하면 사용자가 별도로 클릭하지 않아도 해당 입력 필드에 바로 값을 입력할 수 있어 편의성이 크게 향상됩니다.
autofocus 속성 문법
autofocus 속성의 기본 문법은 다음과 같습니다.
1. autofocus 값 반환하기
object.autofocus
현재 입력 필드에 autofocus가 설정되어 있는지 true 또는 false 값으로 반환합니다.
2. autofocus 값 설정하기
object.autofocus = true | false
true로 설정하면 페이지 로드 시 해당 필드에 포커스가 지정되고, false로 설정하면 자동 포커스가 해제됩니다.
autofocus 속성 예제 코드
다음은 HTML DOM input number autofocus 속성을 실제로 활용한 예제입니다. 버튼을 클릭하면 숫자 입력 필드의 자동 포커스가 비활성화되는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM autofocus property</title>
<style>
body{
text-align:center;
background-color:#1b203a;
color:#ff8741;
}
p{
font-size:1.2rem;
}
input{
border:none;
background-color:#ffffff4a;
height:1.2rem;
padding:8px;
color:#fff;
font-weight:bold;
font-size:1rem;
}
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 Property Example</h1>
<p>Hi! click on disable button to disable autofocus</p>
<input type="number" autofocus value="23450004">
<br>
<button onclick="disable()">Disable</button>
<script>
function disable() {
document.querySelector("input").autofocus = false;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
페이지가 로드되는 즉시 숫자 입력 필드에 커서가 자동으로 위치하는 것을 확인할 수 있습니다. 이제 Disable 버튼을 클릭해 보세요.
Disable 버튼을 클릭하면 JavaScript의 disable() 함수가 실행되어 autofocus = false가 적용되고, 숫자 입력 필드의 자동 포커스가 비활성화됩니다.
정리
autofocus 속성은 HTML에서 직접 지정할 수도 있지만, JavaScript를 통해 동적으로 제어할 수 있다는 점이 큰 장점입니다. 로그인 폼, 검색창 등 특정 입력 필드에 즉시 포커스를 주고 싶을 때 유용하게 활용할 수 있습니다.