HTML autofocus 속성이란?
JavaScript를 사용하지 않고도 페이지가 로드될 때 텍스트 상자(입력 필드)에 자동으로 커서를 위치시키려면 HTML5에서 제공하는 autofocus 속성을 활용하면 됩니다.
autofocus 속성은 불리언(Boolean) 속성입니다. 이 속성이 지정된 <input> 요소는 페이지가 열리는 순간 별도의 스크립트 없이 자동으로 포커스를 받게 되어, 사용자가 바로 입력을 시작할 수 있습니다.
기본 문법
<input type="text" name="fname" autofocus>
실전 예제
아래 예제는 이름과 성을 입력받는 간단한 폼입니다. 'First Name' 입력 필드에 autofocus 속성이 적용되어 있어, 페이지가 로드되면 해당 텍스트 상자에 커서가 자동으로 놓입니다.
<!DOCTYPE html> <html> <body> <form action="/new.php"> First Name: <input type="text" name="fname" autofocus><br> Last Name: <input type="text" name="lname"><br> <input type="submit"> </form> </body> </html>
사용 시 주의 사항
- 한 페이지에는 하나의 요소에만 autofocus를 지정하는 것이 좋습니다. 여러 요소에 중복 지정하면 의도하지 않은 동작이 발생할 수 있습니다.
- <input>뿐만 아니라 <textarea>, <select>, <button> 요소에도 사용할 수 있습니다.
- 모바일 환경에서는 autofocus가 작동할 때 화면 키보드가 자동으로 올라와 레이아웃이 가려질 수 있으므로 UX 측면을 고려해야 합니다.
이처럼 autofocus 속성 하나만 추가하면 JavaScript 코드 한 줄 없이도 편리한 자동 포커스 기능을 구현할 수 있습니다.