setSelectionRange로 검색창 커서 옮기기

간단 소개

setSelectionRange()를 사용하여 검색창 커서 위치를 제어하고, 타이밍 이슈를 setTimeout()으로 해결한 경험을 공유한다.

AI Summary

setSelectionRange()를 이용한 검색창 커서 이동
- setSelectionRange()는 input 또는 textarea 요소에서 특정 영역의 글자를 선택하는 데 사용되며, 커서 위치 변경에도 활용 가능하다.
- element.setSelectionRange(selectionStart, selectionEnd [, selectionDirection]); 형태로 사용하며, 시작/끝 index를 통해 커서 위치를 지정한다.
구현 과정 및 문제 해결
- focus 이벤트 시 커서가 클릭 위치에 머무는 문제 발생, 브라우저 기본 동작과 이벤트 실행 순서의 타이밍 이슈 때문이었다.
- setTimeout()을 사용하여 focus 이벤트 후 커서 이동 시점을 지연시켜 해결했다. delay를 0으로 설정해도 브라우저 동작 방식으로 인해 의도대로 작동한다.
결론 및 활용
- setSelectionRange()는 에디터나 form이 많은 프로젝트에서 유용하게 사용될 수 있다.
- 입력된 글자 전체를 선택하는 HTMLInputElement.select() 메소드도 활용 가능하다.