바닐라 자바스크립트로 HTML 폼의 첫 번째 입력 필드에 자동 포커스 설정하는 방법

HTML 폼에서 페이지 로드 시 첫 번째 입력 필드에 자동으로 포커스를 맞추는 방법을 알아봅니다.

훌륭한 UX 디자인의 핵심 원칙 중 하나는 사용자가 목적지에 도달하기까지의 과정을 최대한 줄여, 원하는 결과를 빠르게 얻을 수 있도록 돕는 것입니다.

아무도 폼 작성을 즐기지 않습니다. 특히 길고 복잡한 폼은 더욱 그렇죠. 페이지 로드 시 HTML 폼의 첫 번째 입력 필드에 자동으로 포커스를 맞추면, 사용자가 마우스를 옮기거나 탭 키를 누르지 않고도 곧바로 입력을 시작할 수 있어 소중한 시간을 절약할 수 있습니다.

HTML 폼

다음 폼 코드를 HTML 문서에 추가하세요:

<form>
	First name:<br>
	<input type="text" name="firstname" id="firstField"><br>Last name:<br>
	<input type="text" name="lastname"><br>Country:<br>
	<input type="text" name="lastname">
</form>

JavaScript

다음 자바스크립트 onload 함수를 .js 파일에 추가하세요:

window.onload = function() {
  document.getElementById("firstField").focus();
};

페이지 로드 시 자동 포커스 데모

아래 데모에서 실제 동작을 확인해 보세요:

CodePen 데모 바로가기

코드 작동 원리

먼저 HTML 폼을 살펴보겠습니다. 첫 번째 입력 필드에는 firstField라는 ID가 지정되어 있으며, 자바스크립트가 타겟팅하는 대상이 바로 이 ID입니다.

자바스크립트에서는 window.onload라는 onload 이벤트를 설정합니다. 이 이벤트는 새 페이지에 접속하거나 브라우저를 새로고침할 때 즉시 실행됩니다.

onload 이벤트가 실행하는 함수는 document.getElementById를 통해 firstField ID를 가진 입력 필드를 찾아낸 뒤, 자바스크립트의 focus() 메서드를 호출하여 해당 입력 필드의 상태를 '포커스됨'으로 변경합니다.

참고: HTML autofocus 속성 활용하기

자바스크립트 없이도 <input autofocus>처럼 HTML의 autofocus 속성만으로 동일한 효과를 얻을 수 있습니다. 다만 자바스크립트 방식은 특정 조건에 따라 포커스를 제어하거나 동적인 상황에 유연하게 대응할 수 있다는 장점이 있습니다.

문제 해결

입력 필드에서 갑자기 포커스 아웃라인이 사라진 경험이 있으신가요? 그 이유는 위에서 작성한 코드가 페이지 로드 시 첫 번째 입력 필드에 단 한 번만 자동 포커스를 적용하기 때문입니다. 자동 포커스된 필드에 곧바로 타이핑하는 것 외에 다른 동작(예: 다른 요소 클릭)을 하면, 페이지를 다시 새로고침하기 전까지는 자동 포커스가 재적용되지 않습니다.