프론트엔드
setSelectionRange로 검색창 커서 옮기기
두줄요약
검색창 재포커스 시 커서를 텍스트 끝으로 옮기는 구현 문제를 다뤘습니다. `setSelectionRange`와 `setTimeout(0)`으로 브라우저 기본 동작 이후 처리했습니다.
문제 상황
- 긴 검색어 입력 후 검색창 재포커스 시 커서와 화면 위치를 텍스트 끝으로 이동해야 하는 요구사항
scrollLeft만으로 화면은 이동하지만 실제 커서는 클릭 위치에 남는 불일치
원인 분석
focus이벤트 콜백 이후 브라우저 기본 클릭 동작으로 커서 위치가 다시 클릭 지점으로 변경되는 타이밍 이슈mouseup기반 처리의 키보드·스크린 리더 포커스 미지원 및 임의 위치 커서 지정 불가 문제
해결 방법
focus이벤트에서setTimeout(..., 0)으로 기본 클릭 동작 이후 커서 이동 예약setSelectionRange(maxLength, maxLength)로 선택 없이 입력값 끝 위치에 커서 배치scrollLeft를 함께 조정해 긴 텍스트의 끝부분 노출
주의할 점
setSelectionRange지원 대상은text,search,url,tel,password타입의input과textarea- 지연값
0도 즉시 실행이 아닌 후속 작업 큐 실행과 최소 지연 발생
