input 태그을 focus 하기

로그인 화면을 들어가 보면 마우스를 클릭할 필요 없이, 바로 input 창에 커서가 올라가 있는 것을 확인 할 수 있다. 이러한 방법을 autofocus라고 한다. 관련 내용을 보면서 구현까지 해보도록 하자.

 

autofocus

페이지 로드 시 별도의 클릭없이 지정한 input창에서 바로 작성을 가능하게 할 수 있도록 하는 기능을 만들어 보자. 이러한 기능을 autofocus라고 한다. 기본적으로 vanilla javascript로 작성을 해보자. 당연히 react에서도 focus를 사용할 수 있다. 아래의 예시를 처음부터 자세히 본다면, 앞으로 autofocus를 마스터 했다고 할 수 있다.

 

react/nextjs에서 autofocus를 사용하는 방식은 약간 다르다. 관련 내용은 아래의 링크를 참고하자.

[React] 접속 시 input창에 자동 글쓰기

 

---

 

 

input tag에 autofocus 추가하기1

첫번째 방법으로는 html의 input 태그에 직접 autofocus를 추가하는 방법이다.

 

<input type='text' name='userNickname' placeholder='아이디을 입력하세요.' autofocus/>

 

위의 input 태그의 마지막 부분에 autofocus를 추가하기만 하면 웹페이지 로드 시 자동으로 autofocus가 되서 바로 키보드를 치는 것이 가능하다. 이렇게만 만들면 사실 어려운 부분은 없다. 그러나 조건에 맞게 핸들링하기는 아쉽다. 특정 조건에서만 focus를 넣게 만들려면, html만으로는 힘들고 javascript를 같이 사용을 해야한다.

 

 

 

 

input tag에 autofocus 추가하기2

두번째 방법은 javascript로 핸들링을 하는 방법이다. 아래는 html 태그이다.

    <label
        for="id"
        >아이디
    </label>
    <input
        id="id"
        type="text"
        placeholder="아이디를 입력해주세요."
    />

 

우리는 위의 input 태그의 id 값으로 element를 받아와서 설정을 진행할 예정이다.

 

// 방법1
const inputId = document.querySelector("#id")
inputId.focus()


// 방법2
const inputId = document.getElementById("id")
inputId.focus()

 

위의 두 가지 방법으로 핸들링이 가능하다. 위의 방법은 #id로 id 값을 #으로 가지고 오는 것이고, 방법2는 getElementById를 활용해서 id 값을 바로 넣어주면 된다. 그리고 focus 매서드를 뒤에 붙여주면 자동으로 autofocus가 된다. 

 

 

input tag에 autofocus 추가하기3

위의 방법으로도 충분히 Focus가 가능하다. 하지만 조금 더 디테일하게 focus를 구현해보자.

 

const $id = document.getElementBVyId("id");

window.addEventListener("load", () => $id.focus());

 

위의 로직은 단순한다. id가 id인 값을 불러온다. 그리고 window가 로딩이 완료 됐을 때, 설정한 element에 focus를 주면 된다. window 로딩을 완료를 확인하기 위하여, window.addEventListener("load", ) 이벤트를 사용한다. 그리고 $ 기호를 사용하는 이유는 관습적인 이유로 DOM을 가져오는 변수라는 의미로 변수 앞에 $를 붙이는 것이다.

 

 

 

심화 focus

사실 우리는 focus를 변경할 때, tap을 활용하여 변경을 한다. 그렇다면, Tab 으로 이동시키는 순서도 핸들링할 수 있지 않을까? Tapindex로 관련 핸들링이 가능하다. 추가적으로 더 궁금하다면 여기를 눌러 확인해 보자.