HTML input에 focus주고, 마지막 글자에 커서 위치

게시글을 수정하는 폼을 만들고 있는데 input 에 focus 를 주어야했다.

 

focus 는 그냥 ref 에 focus 메소드를 사용해서 구현했다.

코드는 다음과 같다.

const TextArea = ({ Edit, value, onChange }) => {
  const ref = useRef(null);
  
  useEffect(() => {
    ref.current.focus();
  }, []);

  return (
    <>
      <AutoResizeTextArea
        ref={ref}
      />
    </>
  );
};
export default TextArea;

 

문제는 커서가 다음과 같이 앞에 생긴다는 것이다.

 

해결 방법은 다음과 같다.

setSelectionRange를 사용하는 것이다.

ref.current.setSelectionRange(value.length, value.length);

 

해결 완료..