[Javascript] 내용에 따라 높이가 조절되는 textarea

S3로 정적 웹사이트 호스팅하기 2편을 작성해야 하지만 게으름의 끝판왕으로 미루고 있는 새벽입니다 ..^^

 

간단히 자바스크립트를 이용해서 textarea 높이를 조절해볼께요.

왜냐하면 S3호스팅은 너무 에너지를 많이 써야하니까 (づ￣ 3￣)づ

 

 

 

 

 

textarea 태그는 글씨가 길어져 줄바꿈이 일어나게 되면 오른쪽에 스크롤이 생기게 된다. 

 

 

 

 

 

이렇게 스크롤이 생기지 않고 밑으로 그 영역자체가 넓어지게 해달라는 요청을 받았다.

당연스럽게 입력값에 따라 자동으로 확장되는 옵션이 있을줄 알았는데 없었다. 이정도 옵션은 있음직 하지 않나요? (만들어주세요..선생님들)

 

 

 

 

 

textare 태그 공식문서

<textarea>: The Textarea element - HTML: HyperText Markup Language | MDN

<textarea id="target" rows="10" cols="50"/>

먼저 타겟을 설정해보자. querySelector를 사용하기위해 className과 id를 사용할 수 있다.

 

여러 target을 동시에 사용하고자 한다면 className이나 tagName을, 특정한 target을 원한다면 id를 추천한다.

 

 

 

 

 

const targetTextarea = document.querySelector(`#target`);

querySelector를 이용하면 위와 같이 설정하고자 하는 textarea를 타겟으로 설정할 수 있다.

 

 

 

 

 

첫번째 방법 

scrollHeight와 clientHeight사용하기

scrollHeight란 현재 스크롤이 존재하는 위치이고 clientHeight란 사용자가 커서로 조작하는 위치이다

출처 : https://javascript.info/size-and-scroll

자료를 참고하면 이해가 쉽니다. client height는 유저가 눈으로 한번에 파악할 수 있는 높이이고, scroll height는 스크롤이 없을때 해당하는 내용을 한번에 보이기 위해 필요한 크기, 즉 스크롤을 한번에 쫙 폈을때의 높이라고 생각하면 쉽다!

 

 

 

 

그렇다면 어떻게 textarea의 높이를 자동으로 내용의 높이만큼 키울 수 있을까?

 

 

 

 

 

내용이 늘어간다면 scroll height는 해당 내용을 담아야 하므로 계속계속 길어진다.

 

 

 

 

하지만 client height는 사용자 입장에서 보이는 길이이므로 textarea 높이를 넘어간다면 일정해 지는 지점이 있을것이다.

 

 

 

 

 

client height는 이제 더이상 증가할 수 없는데 scroll height는 계속해서 길어지는 지점! 바로 그 지점에서 textare의 높이를 수동으로 scroll height로 조정해주면 된다.

 

그렇게 하면 textarea는 scroll이 다 담을 수 있는 높이로 계속계속 길어지게 된다.

 

이 논리를 코드로 나타내면 바로 이런 모습이다.

if(targetTextarea.scrollHeight > targetTextarea.clientHeight) //scroll height가 client height의 길이를 뛰어넘는 지점에서     targetTextarea.style.height= targetTextarea.scrollHeight + "px"; //scroll height로 textarea height 변경

 

 

 

 

 

그렇다면 사용자가 값을 빼게 될때는 어떻게 될까? 바로 scroll height와 client height가 동일한 지점을 찾으면 된다.

 

왜 동일해 질까?

 

 

 

 

 

scroll height는 스크롤이 없을때 모든 내용을 보여주는 크기, client height는 사용자가 볼수있는 크기라고 했다. 우리는 위 코드를 이용해서 scroll height를 계속해서 늘려주었으므로 내용을 계속해서 지우더라도 scroll height는 늘려진 상태로 고정되어 있을 것이다. 

 

또한 사용자가 볼 수 있는 길이를 나타내는 client height 또한 scroll height만큼 길어진 textarea height에서 달라지지 않으므로 이제 내용을 지워도 지워도 client height와 scroll height는 같아지는 상태가 온다.

 

이 때가 바로 text area height를 수정해야 할 시점이다.

 

 

 

 

 

if(targetTextarea.scrollHeight === targetTextarea.clientHeight) //scroll height가 client height의 길이가 같아지는 지점      targetTextarea.style.height= (targetTextarea.scrollHeight-18) + "px";

console로 확인해 보니 나의 경우 scroll hieght는 한 줄이 길어질때마다 18px씩 증가하는 모습을 확인할 수 있었다.

 

해서 같아지는 시점이 올때마다 18px씩 줄여 유동적인 높이 조절을 가능하게 했다.

 

 

 

 

 

최종코드

const targetTextarea = document.querySelector(`#target`);  if(targetTextarea.scrollHeight > targetTextarea.clientHeight) //textarea height 확장     targetTextarea.style.height= targetTextarea.scrollHeight + "px";  else //textarea height 축소     targetTextarea.style.height= (targetTextarea.scrollHeight-18) + "px";

 

 

 

 

두번째 방법 

줄 수 사용하기

첫번째 방법을 사용하면 치명적인 단점이 있다. 바로 중간 드래그 후 내용을 삭제하면 높이가 내용에 꼭 맞는 높이로 줄어들지 않는다는 것!

 

아래서 부터 삭제를 한다면 줄어드는 조건인 scroll height와 client height가 같은 지점에 해당할때마다 줄어들어 높이가 맞게 조정이 된다.

 

하지만 중간지점이 한꺼번에 사라진다면 코드 시점에서 같은 지점이 1번만 발생하였기 때문에 사라진 줄 수 만큼 높이가 줄어드는 것이 아니라 1회만 주어진 높이만큼 줄어들게 되는 것이다.

 

 

 

 

이러한 문제를 해결하기 위해 아예 줄수를 세서 그 기준으로 textarea를 조정해 보기로 했다. 요경우는 client height와 scroll height를 이용하는것 보다 훨씬 간단하다

 

const rowCount = value.split(/\r\n|\r|\n/).length;

먼저 줄 수를 세준다. 이제 모든 준비는 끝났다

 

 

 

 

 

targetTextarea.style.height= (rowCount * 18) + "px"; //줄 수에 따라서 높이를 조절

완전 쉽쥬 ? ㅎ 위 방법에 비해서 너무너무 심플한 것. 해당하는 줄 수에 한 줄의 높이만큼 곱하면 된다.

 

 

 

 

 

 

최종코드

const rowCount = value.split(/\r\n|\r|\n/).length; const targetTextarea = document.querySelector(`#target`); if(rowCount < 4)      targetTextarea.style.height="52px"; //특정 줄 수 보다 작아지면 height가 이것보다 작아지지 않았으면 한다 else     targetTextarea.style.height= (rowCount * 18) + "px";

 

 

 

 

 

 

이렇게 두 방법으로 textarea의 높이를 조절하는 방법을 알아보았다. 혹시 필요한 분이 있으시다면 도움이 되길 바라며 이번 포스팅은 여기서 끝!

 

S3 정적호스팅 2번째 포스팅은 얼른얼른 가져와야겠다 .. 미루면 안하게 되는 못된 습관 ㅠㅠ 오늘 4월 21일이니까 22일 내일 금요일에 작성을 시작해서 이번주 안에는 포스팅 해야겠다 ㅎㅎ