HTML DOM의 select autofocus 속성은 페이지가 로드될 때 드롭다운 목록(select 요소)이 자동으로 포커스를 받아야 하는지 여부를 확인하거나 설정하는 데 사용됩니다. 이 속성을 활용하면 폼 입력 시 사용자 편의성을 높일 수 있으며, JavaScript를 통해 동적으로 포커스 동작을 제어할 수도 있습니다.
문법(Syntax)
autofocus 속성의 기본 문법은 다음과 같습니다.
1. autofocus 값 가져오기
object.autofocus
2. autofocus 값 설정하기
object.autofocus = true | false
- true : 페이지 로드 시 해당 드롭다운 목록에 포커스가 자동으로 설정됩니다.
- false : 페이지 로드 시 포커스가 설정되지 않습니다.
예제(Example)
HTML DOM select autofocus 속성의 실제 사용 예제를 살펴보겠습니다. 아래 예제에서는 버튼 클릭 시 드롭다운 목록의 자동 포커스를 해제하는 기능을 구현했습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM autofocus property</title>
<style>
body{
text-align:center;
color:#fff;
background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129,125,254,1) 0%, rgba(111,167,254,1) 90% ) no-repeat;
height:100vh;
}
p{
font-weight:700;
font-size:1.1rem;
}
.drop-down{
display:block;
width:35%;
border:none;
font-weight:bold;
padding:10px;
margin:1rem auto;
background-color:#ffffff7a;
outline-color:black;
}
.btn{
background:orange;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
font-weight:bold;
outline:none;
cursor:pointer;
}
</style>
</head>
<body>
<h1>autofocus Property Example</h1>
<p>Hi, Select your favourite subject:</p>
<select class='drop-down' name="Drop Down List">
<option>Physics</option>
<option>Maths</option>
<option>Chemistry</option>
<option>English</option>
<option>Economics</option>
<option>Hindi</option>
<option>Biology</option>
</select>
<br>
<button onclick="disable()" class="btn">Disable Autofocus</button>
<script>
function disable() {
document.querySelector(".drop-down").autofocus = false;
}
</script>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
"Disable Autofocus" 버튼을 클릭하면 드롭다운 목록에 설정된 자동 포커스가 해제됩니다.
