본문 바로가기

페이지 로드 시 마우스 커서를 텍스트 입력란(input box)에 위치시키는 방법 (자바스크립트)

2019.05.04 댓글 4

페이지가 로드될 때 텍스트 입력란에 마우스 커서가 위치시키고 싶을 때가 있습니다.

예를 들어, 페이지 로드 시 마우스 커서가 검색 필드에 위치하게 되면 사용자들이 곧바로 텍스트를 입력하여 검색할 수 있어 사용자 경험(UX)를 향상시킬 수 있을 것입니다.

마우스 커서 위치

이 경우 여러 가지 방법을 이용할 수 있습니다.

먼저 input 필드에 autofocus를 추가하면 간편합니다.

<input id="myinputbox" type="text" autofocus>

하지만 일부 브라우저에서는 이 기능을 지원하지 않을 수 있습니다. 다음과 같은 자바스크립트(Javascript)를 사용할 수 있습니다.

window.onload = function() {
  var input = document.getElementById("myinputbox").focus();
}

바람직하지 않을 수 있지만 jQuery를 원하는 경우 다음과 같은 형식으로 가능합니다.

$(document).ready(function() {
    $('#id').focus();
});

참고:

※일부 글에 제휴 링크가 포함될 수 있습니다.

댓글4