[TIL]HTML 페이지 로딩시 input에 커서 위치 자동으로 설정하는 방법 (+IE 브라우저)

Intro

개발하고 있는 페이지 중 검색하고자 하는 text를 input으로 받고 있는 부분이 있었다. 페이지에 대한 피드백을 받덛 도중 input에 사용성의 고려하여 자동 포커싱을 주는 것이 어떠냐는 의견이 나왔다. 생각해보니 사용자가 마우스 커서를 한번 클릭하지 않아도 되므로 사용자 입장에서 사용하기 편리할 것 같다고 느껴졌다.

실제 네이버 홈페이지에 들어가 검색창을 확인하니 화면이 로드되는 순간 네이버 검색창의 커서가 자동으로 맞춰져 있었다. 그렇다면 어떻게 input 커서 위치를 자동으로 설정할 수 있을까?

How to do

<input type="text" id="card_num" autofocus />

페이지가 로딩되는 순간 해당 Input 박스로 커서가 이동된다. 하지만, IE 브라우저에서는 해당 방법이 통하지 않았다.

How to do (+IE 브라우저)

$('[autofocus]').focus()

위 js 코드를 추가로 삽입하면 잘 작동이 된다!

Conclusion

1. 고객의 사용성에 대해 고려하기
2. IE 브라우저..너란 녀석..😅

https://blog.edit.kr/entry/HTML-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A1%9C%EB%94%A9%EC%8B%9C-input%EC%97%90-%EC%BB%A4%EC%84%9C-%EC%9E%90%EB%8F%99%EC%9C%BC%EB%A1%9C-%EA%B0%80%EA%B8%B0
https://stackoverflow.com/questions/8280988/how-to-make-input-autofocus-in-internet-explorer