FE랭이꽃

textarea안에 적은 내용만큼, 또는 Enter키 누를 때마다 자동으로 높이가 조절되는 textarea 기능을 만들어보겠습니다.

먼저 body안에 테스트할 아래 태그와 적당한 스타일을 추가해줍니다.

<textarea>반지의 제왕은 톨킨이 창조한 세계인 중간계의 제3시대 말을 배경으로, 인간족과 다른 종족들(호빗, 요정, 난쟁이, 오크 등)의 이야기를 다루고 있다.
  이야기는 암흑 군주 사우론이 만든 절대 반지(the One ring)를 중심으로 조용한 마을인 샤이어서부터 중간계를 지나며
  반지전쟁의 진행과정을 주인공인 프로도의 눈으로 보인다. 이어지는 6개의 부록에서는 중간계의 역사적, 언어학적 배경을 담고 있다.
  톨킨의 다른 책과 같이, 반지의 제왕은 톨킨이 관심을 가지고 있던 북유럽 신화에서 많은 부분을 차용하였다.
  이 외에도 제1차 세계 대전에서의 경험[4] 이나, 기독교(로마 가톨릭교회), 산업화도 톨킨의 세계에 영향을 주었다.
  반지의 제왕은 현대 판타지 소설에 큰 영향을 끼친 것으로 인식되는데, 톨키니안(Tolkienian) 이나 톨키니스크(Tolkienesque) 같은 단어들이
  옥스퍼드 영어 사전에 등재되었다.
</textarea>

textarea {width:50%; padding:20px 20px 5px; border:1px solid #ddd; background:#fcfcfc; resize:none; overflow-y:hidden; font-family:"malgun gothic";}

순수 자바스크립트로 textarea auto resize height

/* vanilla javascript */
document.addEventListener("DOMContentLoaded", function() {
  var $textarea = document.querySelector("textarea");
  $textarea.addEventListener('keyup', function(e) {
    this.style.height = "auto";
    this.style.height = this.scrollHeight + "px";
  });
  $textarea.dispatchEvent(new Event('keyup'));
});

Jquery를 이용한 textarea auto resize height

/* jQuery */
$(document).ready(function() {
  $('textarea').on( 'keyup', function (e){
    $(this).css('height', 'auto');
    $(this).height(this.scrollHeight);
  });
  $('textarea').keyup();
});

코드하단에 textarea에 걸어둔 이벤트를 한번 먼저 호출해주는 이유는 브라우저에서 기본 지정된 높이 또는 style에서 지정된 높이를 로딩시 컨텐츠내용만큼 다시 조정하기위해서입니다. 로딩시 textarea에 들어갈 text가 없다면 굳이 안넣어줘도 됩니다.

그리고 css로 height를 auto로 먼저 잡아주는 이유가 있는데요. 기존 높이를 auto로 먼저 잡아주지 않으면 textarea 높이를 재세팅할 때 내용 한줄한줄 만큼이 아닌 기존 height를 반영하여 확확 커지기 때문입니다. 왜 이렇게 동작하게 됬는지는 잘 모르겠습니다. 일종의 버그인지도 모르겠네요.

아래의 배열데이터를 테이블로 출력할 때 순수자바스크립트와 jQuery로 각각 어떻게 표현하는지 비교해보겠습니다.

var data = [
    ["내용1_1", "내용1_2"],
    ["내용2_1", "내용2_2"],
    ["내용3_1", "내용3_2"],
    ["내용4_1", "내용4_2"]
];

준비된 테이블형태는 다음과 같고 tbody안에 <tr><td>내용1_1</td><td>내용1_2</td></tr>과 같은 형식으로 출력되도록 할 것입니다.

<table class="list">
    <thead>
        <th>항목1</th>
        <th>항목2</th>
    </thead>
    <tbody>
    </tbody>
</table>

예상 결과화면은 다음과 같습니다.

참고로 스타일은 생략해도되지만 전 대략적으로 잡아주겠습니다.

<style>
h3 {margin-bottom:10px;}
table {width:30%; margin-bottom:30px; border-collapse:collapse;}
table th, table td {border:1px solid #ddd;}
</style>

순수 자바스크립트로 테이블목록 출력

/* vanilla javascript */
document.addEventListener("DOMContentLoaded", function() {
    var $listTbody = document.querySelector(".list tbody");
    data.forEach(function(val) {
        $listTbody.innerHTML +="<tr><td>" + val[0] + "</td><td>" + val[1] + "</td></tr>";
    });
});

jQuery로 테이블목록 출력

/* jQuery */
$(document).ready(function() {
    var $listTbody = $(".list tbody");
    data.forEach(function(val) {
        $listTbody.append("<tr><td>" + val[0] + "</td><td>" + val[1] + "</td></tr>");
    });
});

간단한 예제라 그런지 순수 자바스크립트와 jQuery간의 코드분량차이가 많이 나진 않습니다. 다만 주의할 것은 각 속성또는 메서드마다 서포트브라우저가 다르므로 하위호환성이 필요한 경우 잘 확인을 해주셔야 합니다. (ie지원 종료전까지 참고요망)