HTML textarea 자동 높이 조절

1 개요

textarea overflow visible

textarea auto resize in html on chrome

textarea 높이 내용물에 맞추기

textarea 자동 크기 조절

<style> textarea {width:300px;overflow:visible;} </style>
<textarea>Hello world</textarea>

• 예제: http://zetawiki.com/ex/js/textarea_overflow.php
• IE든 크롬이든 최초 문자열의 크기에 맞게 TEXTAREA 세로 크기가 정해진다.
• 이후에 텍스트를 입력하면...

IE8에서는 그에 맞게 TEXTAREA의 세로 크기가 늘어난다.

크롬에서는 늘어나지 않고, 대신 스크롤이 생긴다...

2 방법 1: JavaScript

내용물 높이에 맞춰주는 스크립트를 추가하면 크롬에서도 자동맞춤이 된다.

<script>
function resize(obj) {
  obj.style.height = "1px";
  obj.style.height = (20+obj.scrollHeight)+"px";
}
</script>
<textarea onkeyup="resize(this)">Hello world</textarea>

3 방법 2: jQuery

방법 1과 동일하게 jQuery로 구현

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
  $("textarea.autosize").keyup(function () {
    $(this).css("height", "1px")
      .css("height", (20+$(this).prop("scrollHeight"))+"px");
  });
});
</script>
<textarea class="autosize">Hello world</textarea>

4 같이 보기

• HTML textarea 태그
• CSS overflow 속성

5 참고 자료

• http://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length