setSelectionRange로 검색창 커서 옮기기
프론트엔드
setSelectionRange로 검색창 커서 옮기기
두줄요약
검색창 포커스 시 커서를 끝으로 옮기는 과정에서 발생한 이벤트 순서 문제를 분석했습니다. `setSelectionRange`와 0ms `setTimeout`으로 커서·스크롤 위치를 함께 제어했습니다.
문제 상황
- 긴 검색어가 입력된 검색창 재포커스 시 커서와 가로 스크롤을 텍스트 끝으로 이동해야 하는 요구
scrollLeft만 변경할 때 화면 위치와 실제 커서 위치가 불일치하는 현상
해결 방법
focus이벤트에서setSelectionRange(maxLength, maxLength)로 커서를 입력값 끝 위치로 지정scrollLeft를 함께 변경해 커서가 있는 끝부분을 화면에 노출setTimeout(..., 0)으로 브라우저의 클릭 위치 커서 이동 이후 로직 실행
원인 분석
focus콜백이 input 클릭에 따른 브라우저 기본 커서 이동보다 먼저 실행되는 이벤트 타이밍 이슈mouseup방식의 키보드·스크린 리더 접근성 저하와 임의 커서 위치 지정 불가 문제
주의할 점
setSelectionRange는text,search,url,tel,password타입에서만 사용 가능- 0ms
setTimeout도 즉시 실행이 아닌 다음 작업 시점으로 지연되는 특성