[Web] setSelectionRange 이용하여 input 값 커서 옮기기

개념

<input /> <textarea /> element에서 특정 문자열을 세팅 (하이라이팅)

 

See the Pen setSelectionRange by Daewoong Kim (@daewoong-kim) on CodePen.

 

시행착오 1

focus 이벤트를 받고, 그 안에서 setSelectionRange를 선언 후 scrollLeft를 해주었더니, 

브라우저 기본 동작인 input 클릭 시 해당 위치로 커서를 이동시키는 동작 보다 addEventListener를 통해 등록된 focus 이벤트 콜백 함수가 먼저 실행되는 타이밍 이슈가 발생

(마우스를 이용하지 않고 키보드로 포커스를 주면 이상 없음)

 

시행착오 2

mouseup 이벤트 사용해보았지만 focus일 때 동작하지 않음. 

 

결론

포커스 되면 setTimeout 사용하여 커서를 이동시킴

 

See the Pen Untitled by Daewoong Kim (@daewoong-kim) on CodePen.

 

 

 

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange

HTMLInputElement: setSelectionRange() method - Web APIs | MDN

 

https://fe-developers.kakaoent.com/2021/211104-setselectionrange/

setSelectionRange로 검색창 커서 옮기기 | 카카오엔터테인먼트 FE 기술블로그