Vanilla JavaScript로 첫 번째 양식 입력 필드에 자동 초점을 맞추는 방법

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();
};

페이지 로드 데모의 자동 초점 입력 필드

아래 데모를 확인하세요.

https://codepen.io/StrengthandFreedom/pen/yLypogQ

코드 작동 방식

HTML 양식을 살펴보십시오. HTML 양식의 첫 번째 입력 필드에 있는 ID를 firstField라고 합니다. — 이것이 우리가 JavaScript로 목표로 삼는 것입니다.

JavaScript에서 window.onload라는 onload 이벤트를 설정합니다. 새 페이지로 이동하거나 브라우저를 새로 고칠 때 즉시 실행됩니다.

onload 이벤트는 firstField가 있는 입력 필드를 찾는 함수를 실행합니다. document.getElementById를 통한 ID 그런 다음 JavaScript focus()를 사용합니다. 상태를 설정하는 방법 초점을 맞출 입력 필드의.

문제 해결

초점 윤곽이 입력 필드에서 갑자기 사라지나요? 우리가 작성한 코드는 첫 번째 입력 필드에 한 번만 자동 초점을 맞추기 때문입니다. 각 페이지 로드 시. 자동 초점 입력 필드에 즉시 입력하는 것 외에 다른 작업을 수행하면 다른 페이지를 새로 고칠 때까지 자동 초점이 다시 설정되지 않습니다.