동적으로 크기를 조정할 수 있는 텍스트 영역을 만드는 방법은 무엇입니까?

textarea의 크기를 동적으로 조정할 수 있도록 만드는 것은 텍스트 편집기, 댓글 영역 또는 연락처 섹션에 좋은 UX를 제공하는 데 기본이 됩니다. 그러나 사용 가능한 모든 솔루션이 너무 복잡하거나 다른 종속성을 설치해야 하거나 호환되지 않는 해결 방법이 필요합니다.

이 게시물에서는 React를 사용하여 이 문제에 대한 빠르고 간단한 솔루션을 보여드리지만 다른 곳에 적용할 수 있습니다.

좋아요, 그럼 코드를 보여주세요:

textarea {
  width: 500px;
  min-height: 100px;
  padding: 8px;
  font-size: 18px;
  resize: none;
  border: solid 1px;
  border-radius: 4px;
  outline: none;
}

const ref = useRef<HTMLTextAreaElement>(null);

const handleInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
  if (ref.current) {
    ref.current.style.height = "auto";
    ref.current.style.height = `${e.target.scrollHeight - 16}px`;
  }
};

return (
  <div className="App">
    <section>
      <textarea
        ref={ref}
        rows={1}
        placeholder="Enter text here..."
        onInput={handleInput}
      />
    </section>
  </div>
);

설명

몇 가지 핵심 사항에 주의를 환기시키고 싶습니다. 높이를 auto 로 설정하기 전에 높이를 scrollHeight-16 로 설정하고 있습니다. 지금은 -16를 잊어버리고 나중에 이야기하겠습니다. 작동 방식을 설명하기 위해 아래 줄을 그대로 두겠습니다.

const handleInput = (e: ChangeEvent<HTMLTextAreaElement>) => {
  if (ref.current) {
    ref.current.style.height = `${e.target.scrollHeight}px`;
  }
};

키를 누를 때마다 텍스트 영역의 높이가 높아집니다. 모든 keypres에서 높이가 16px씩 증가하는 것을 볼 수 있습니다. scrollHeight에 패딩이 포함되어 있기 때문에 발생합니다. 예를 들어 텍스트 영역의 높이가 처음에 40px라고 가정하면 각 keypres에서 발생하는 일은 다음과 같습니다.

i) height = x+16
ii) height = x+16+16
iii) height = x+16+16+16
...

그것이 padding-top + padding-bottom의 합이고 다시 세지 않기 때문에 16을 뺀 이유입니다.

이제 크기가 증가할 때 높이가 올바르게 조정되어야 하지만 선을 삭제해도 높이가 더 짧아지지 않는 것을 볼 수 있습니다. 이 문제를 해결하기 위해 이전에 높이를 auto로 설정하면 작업이 자동으로 수행됩니다.

또한 row={1} 를 추가했음을 알 수 있습니다. 마지막 줄 아래에 빈 줄이 있는 것을 원하지 않기 때문입니다. 텍스트 영역 하단에 추가 공간을 추가하는 방법을 보려면 제거하십시오.

그게 다야, 도움이 되길 바란다. 감사.

모래 상자

https://codesandbox.io/s/dynamically-resizable-textarea-9jbs1y

참조:

i) https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas
ii) https://www.npmjs.com/package/autosize