HTML 페이지 로딩 시 input 태그에 커서 위치하기 autofocus와 jQuery focus 사용 방법

웹 페이지에서 로그인 페이지나 회원가입 화면에서 로딩 시 첫 번째 input 태그에 자동으로 커서가 위치하는 방법입니다.

페이지가 로드될 때 특정 입력 필드에 자동으로 포커스를 맞추는 방법은 HTML의 autofocus 속성을 사용하는 것입니다. 이를 통해 사용자가 즉시 키보드 입력을 할 수 있어 편리함을 제공합니다.

 

autofocus 속성 사용하기

• HTML 코드  : 

<input type="text" name="username" autofocus>

HTML 코드에서 <input> 태그에 autofocus 속성을 추가하면 페이지 로드 시 해당 입력 필드에 자동으로 포커스가 맞춰집니다.

• HTML 예시 : 

<form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" autofocus>
    <br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    <br>
    <input tpye="submit" value="submit"
    <br>
</form>

위 예시에서 "Username" 입력 태그에서 autofocus 속성이 작성되어 있어 페이지가 로딩되면 해당 태그의 위치로 자동으로 커서 포커스가 맞춰집니다.

반응형

jQuery를 이용한 자동 포커스

jQuery를 사용하면 document.ready 이벤트를 통해 페이지 로딩 시 특정 입력 필드에 포커스를 맞출 수 있습니다.

• jQuery 코드 : 

$(document).ready(function() {
	$(input[name='username']).focus();
));

이 코드는 페이지 로드 시 "username" 입력 필드에 자동으로 포커스를 맞춥니다.

 

HTML의 autofocus 속성을 사용하면 간단하게 페이지 로드 시 특정 입력 필드에 자동으로 커스를 맞출 수 있습니다. 이틀 통해 UX(사용자 경험)를 향상할 수 있습니다. 또한 jQuery를 사용하면 더 다양한 방식으로 자동 포커스 기능을 구현할 수 있습니다.

추가로, 특정 상황에서 자동 포커스 기능을 제어하기 위해서는 JavaScript를 사용할 수 있습니다. 예를 들어, 특정 조건에 따라 자동 포커스를 활성화/비활설화하거나, 포커스 대상을 동적으로 변경할 수 있습니다.