HTML textarea 자동 높이 조절

textarea overflow visible

textarea auto resize in html on chrome

textarea 높이 내용물에 맞추기

textarea 자동 크기 조절

1 소스 코드1

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

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

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

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

2 소스 코드2

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

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

• 예제: http://zetawiki.com/ex/js/textarea_overflow2.php

3 같이 보기

• HTML textarea 태그
• CSS overflow 속성

4 참고 자료

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