요즘 회사에서 이것저것 삽질을 하면서 뭔가 또 뚝딱거리고 있는데, HTML의 textarea 높이를 자동으로 조절할 필요가 생겼다. 여기저기 인터넷을 뒤져 발견한 방법들을 아래에 공유한다.

HTML 구조

기본 베이스 구조는 다음처럼 구성되었다고 가정한다.

<table>
  <tr>
    <td>
      <textarea id="resize" placeholder="메모"></textarea>
    </td>
  </tr>
</table>

방법1: jQuery 방식

처음 발견한 방법은 jQuery를 이용한 방법이다.

table {
  width: 500px;
  border: 1px solid black;
}

textarea {
  overflow-y: hidden;
  resize: none;
  padding: 1em;
  padding-bottom: 0.2em;
}
$(document).ready(function() {
  $("table").on("keyup", "textarea", function(e) {
    $(this).css("height", "auto");
    $(this).height(this.scrollHeight);
  });
  $("table").find("textarea").keyup();
})

방법2: Pure JavaScript 방식

회사에는 위의 방식을 적용했었는데, 나중에 좀 더 찾아보니 jQuery를 쓰지 않는 방법도 있어 공유한다.

<table>
  <tr>
    <td>
      <textarea id="resize" placeholder="메모" onkeydown="resize(this)" onkeyup="resize(this)"></textarea>
    </td>
  </tr>
</table>
table {
  width: 500px;
  border: 1px solid black;
}

textarea {
  overflow-y: hidden;
  resize: none;
  padding: 1em;
  padding-bottom: 0.2em;
}
function resize(obj) {
    obj.style.height = "1px";
  obj.style.height = (12 + obj.scrollHeight) + "px";
}

개발환경(jQuery를 안 쓴다던지)에 따라 사용방법을 고르면 된다.

Reference

'Studies > WEB' 카테고리의 다른 글

HTML textarea 높이 자동조절  (0) 2020.04.18

+ Recent posts