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

2019. 5. 4. 05:00 | 댓글 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();
});

참고:

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

    예를 들어, 구글 맞춤검색 기능을 사용하는 경우에도 위에서 제시한 방법을 사용하면 검색 아이콘을 클릭하면 검색 페이지가 로드되면서 마우스 커서가 구글 맞춤검색 입력 필드에 위치하게 할 수 있습니다.

  2. thumbnail
    IT세레스

    제 블로그도 한창 공사중인데 이 방법도 써볼까 해요.
    좋은 정보 감사합니다.^^