input 커서 위치 문제

Taek·2021년 12월 10일
0

input 박스에 입력된 값을 특정 포맷으로 후처리하는 기능을 추가하니 input 커서의 위치가 항상 마지막에 위치하는 문제가 있었음

새로운 값이 추가적으로 입력되거나 마지막 입력값부터 지우고 수정하는 상황에선 문제가 없었지만, 그 외에 중간부터 쓰고 지우는 동작에서 사용감이 좋지 않았다

input 요소가 제공하는 dom api selectionStart, selectionEnd, setSelectionRange를 찾아 적용

// 커서의 위치보다 입력값의 길이가 크면 입력값 중간에서 수정이 일어난 것으로 커서의 포지션을 lastPos에 할당
const lastPos = value.length > this.selectionEnd && this.selectionEnd;
setMacAddress(value);
lastPos && this.setSelectionRange(lastPos, lastPos);

0개의 댓글