[Javascript] textarea 다뤄보기 / 스크롤바 가리기, 자동 높이 조절 with CSS

프로젝트를 작업하다보니 textarea영역을 다뤄야 하는 일이 생겼다.

이전에는 한번도 사용해보지 않았는데 이번에 사용하면서 몇가지 알게된 부분을 적어보겠다.

 

 

1. 스크롤바 안보이게하기 / 모서리 사이즈 조절 막기

textarea {
  overflow-y: hidden;
  resize: none;
}

세로스크롤을 안보이게 하려고 overflow-y를 했지만 가로까지 포함해서 하려면

overflow: hidden;을 하면 된다.

 

resize:none을 하면 사용자의 사이즈 조절을 막을 수 있다.

 

+ 스크롤바를 없애는데에는 아래와 같은 코드도 적용 가능하다.

textarea {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
textarea::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

 

2. 텍스트 작성 시 자동 높이 조절

const onChange = (event) => {
    event.target.style.height = "100px";
    event.target.style.height = event.target.scrollHeight + "px";
  };

 

텍스트 작성 시 event를 발생시켜서

해당 target의 height를 scrollHeight로 변경해주면 자동으로 높이 조절이 된다.

텍스트를 지울때도 사이즈를 알맞게 하려면 height를 상단에 선언해주어야한다.

 

 

 문제발생 1.

textarea {
  padding: 5px;
  resize: none;
  height: 100px;
  overflow: hidden;
}

 

그런데 위와 같이 CSS로 스타일링을 하고 텍스트를 적어보면

처음에 지정한 높이와 다르게 textarea의 높이가 줄어들거나 늘어나는 경우가 있다.

 

여기서 알아야 할 점은 scrollHeight는

border값을 제외한 padding을 포함한 컨텐츠 영역의 높이이다.

padding값이 있는 상태에서 위의 코드를 실행한다면

텍스트를 적음과 동시에 약간의 높이가 늘어남을 알 수 있다.

 

box-sizing: border-box;로 해결이 가능하지만 기본적으로 border가 들어가 있어서

height를 100px으로 해 둘경우 border의 위 아래 1px씩 빼게되면 scrollHeight는 98이 되버리기 때문에

약간의 들썩임이 발생한다. < 이부분이 너무 거슬렸다,,!!!

 

해결방법으로는 border를 0으로 지정을 하면 되지만 border 스타일링이 필요한 상황에서는

scrollHeight에서 border값을 빼주거나 다양한 방법이 있겠지만

textarea를 div로 감싸서 div에 스타일링 하기로 했다.

 

해결

  .box {
    border: 1px solid #ddd;
    background: white;
    padding: 1em;
    box-sizing: border-box;
  }
  textarea {
    display: block;
    resize: none;
    overflow: hidden;
    border: 0;
    width: 100%;
    height: 20px;
  }
  textarea:focus {
    outline: none;
  }

 

문제발생 2.

event.target.style.height = "100px";

생각해보니 저 위의 코드처럼 js코드에 px값을 적어준다는게 이상하다고 느껴졌다.

만약 높이를 수정하려면 css랑 js코드 둘 다 수정해야된다니..??

 

해결

event.target.style.height = "auto";

<textarea placeholder="메모를 입력해주세요." rows="1" />

height를 변경하고 css의 height를 없앴다.

그리고 기본으로 지정할 높이를 textarea의 속성인 rows속성을 이용해주었다.

row값을 생략하면 기본 2줄로 나타난다.