웹 페이지가 열리는 순간 사용자가 마우스를 클릭하지 않고도 바로 입력할 수 있도록 텍스트 상자에 커서를 자동으로 배치하고 싶다면, HTML의 autofocus 속성을 사용하면 됩니다.
autofocus 속성이란?
autofocus는 불리언(Boolean) 속성입니다. 이 속성이 <input> 요소에 지정되어 있으면, 페이지가 로드되는 즉시 해당 요소가 자동으로 포커스를 받게 되어 커서가 깜빡이는 상태로 나타납니다.
특히 검색창, 로그인 폼처럼 사용자가 가장 먼저 입력해야 하는 필드에 적용하면 클릭 과정을 생략할 수 있어 사용자 경험이 크게 향상됩니다.
사용 예제
아래 코드에서 'Name' 입력 필드에 autofocus 속성을 추가했습니다. 페이지가 로드되면 커서가 자동으로 Name 필드에 위치합니다.
<!DOCTYPE html> <html> <body> <form action = "/new.php"> Name: <input type = "text" name = "name" autofocus><br> Subject: <input type = "text" name = "sub"><br> <input type = "submit"> </form> </body> </html>
주의 사항
- autofocus 속성은 하나의 문서에서 한 번만 사용하는 것이 좋습니다. 여러 요소에 적용하면 첫 번째 요소만 포커스를 받습니다.
- 모바일 기기에서는 화면 키보드가 자동으로 올라와 콘텐츠를 가릴 수 있으므로 신중하게 사용해야 합니다.
- JavaScript의
element.focus()메서드로도 동일한 효과를 낼 수 있지만, 단순한 초기 포커스라면 autofocus 속성이 더 간편합니다.