setSelectionRange로 검색창 커서 옮기기

검색창 커서 위치 제어

• setSelectionRange() 메서드를 사용하여 input 요소의 커서 위치를 제어하는 방법 설명
  • setSelectionRange(selectionStart, selectionEnd)를 사용하여 커서 위치를 지정
  • selectionDirection 옵션을 통해 선택 방향 설정 가능
• 구현 과정 및 문제 해결
  • focus 이벤트 시 커서 이동 문제 발생 (브라우저 기본 동작과의 타이밍 문제)
  • mouseup 이벤트로 변경 시 키보드 사용자 UX 저하 및 커서 위치 고정 문제 발생
  • setTimeout()을 사용하여 비동기적으로 커서 이동시켜 문제 해결 (딜레이 0ms 설정)
• 실제 코드 예시
  • setTimeout을 이용, focus 이벤트 발생 후 커서를 맨 뒤로 이동시키고, 스크롤 위치 조정
  • HTMLInputElement.select() 메서드를 활용하여 텍스트 전체 선택 가능