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

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

자바스크립트를 사용하여 페이지 로드 시 마우스 커서를 텍스트 입력란(input box)에 위치시키기

예를 들어, 페이지 로드 시 마우스 커서가 검색 필드에 위치하게 되면 사용자들이 곧바로 텍스트를 입력하여 검색할 수 있어 사용자 경험(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();
});

예시: 아래 링크를 클릭하면 구글 맞춤 검색 입력란에 커서가 위치하게 됩니다.

 

유용한 워드프레스 테마 & 플러그인 - 워드프레스 포럼

참고:

• javascript로 텍스트 변경하기