23/10/20 TIL __ .focus()

 

 

 

🚗  input 커서 자동 위치 기능

 

 

원했던 방향

   👉 페이지 리로드 되면 커서가 인풋으로 자동 위치되도록 하고 싶었다. 

 

 

구현 방법

 

1. input 태그의 속성으로 autofocus 를 추가해 준다.

<!-- 페이지 로드되자마자 커서 오도록 autofocus설정 -->
<input id="searchInput" type="text" autofocus />

 

      👉  autofocus 의 특징은 페이지가 로드 되자마자 자동으로 포커싱이 된다. 

 

 

 

   2.  .focus() 메소드를 이용한다. 

//input 자동 커서
let input = document.querySelector("#searchInput");
input.focus();

 

.focus() 는 처음본 메소드라 찾아봤는데, 참고한 링크는 아래와 같다. 

 

 

🧐    . focus( ) 

• 특정한 포커스로 이동해야 할 경우에 사용하면 좋다. 
• 포커스를 제거하려면 . blur( ) 메소드를 이용하면 된다.

 

 

 

https://ko.javascript.info/focus-blur

focus와 blur

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

HTMLElement: focus() method - Web APIs | MDN