주제

div element로 focus하기

목적

<input id="title-input" />

document.getElementById("title-input").focus()

<input />은 위의 코드를 사용하면 해당 입력창으로 focus가 된다.

.
.

<div id="contents"></div>

document.getElementById("contents").focus() 

하지만 <div></div>는 focus를 사용한다고해도 해당 div로 화면이 움직이지 않는다.
.
.

<div id="contents"></div>

window.location.hash = '#contents'

이렇게 js를 실행하면 해당 div로 focus되지만, 링크에 www.url.com/#contents 처럼 해쉬값이 추가된다.
그러나 나는 이게 마음에 들지 않아서 다른 방법을 찾아보고자 한다.

해결

stackoverflow 참고
tabindex 관련 MDN

<div id="contents" tabindex="0"></div>

document.getElementById("contents").focus()

tabindex 설정을 추가하면 위의 javascript 코드를 사용하여 focus가 가능하다!