<textarea> 자동높이조절하기

수빈·2022년 8월 12일
0

React

목록 보기
19/25


textarea에 입력한 내용이 길어지면, 스크롤바가 생기는데, 스크롤바 없이 자동으로 textarea의 높이가 내용 크기에 맞게 자동으로 조절되도록 만들고 싶었다.

1.

const [height, setHeight] = useState();
 <textarea
   onKeyUp={(e: any) => {
    if (60 < e.target.scrollHeight) {
      setHeight(e.target.scrollHeight);
    }}}
   style={{ height: `${height}px` }}
   ></textarea>
textarea {
	overflow-y : hidden; //scroll모양 감추기
}

이렇게 하면, textarea내용이 길어질때 자동으로 높이가 커지게된다.
하지만, 내용을 지워서 높이가 다시 작아질때 textarea는 높이가 그대로 유지되는 문제가 있다.

0개의 댓글