"HTML textarea 자동 높이 조절"의 두 판 사이의 차이

잔글 (봇: 자동으로 텍스트 교체 (-</source> +</syntaxhighlight>, -<source +<syntaxhighlight ))
 
(사용자 6명의 중간 판 20개는 보이지 않습니다)
5번째 줄: 5번째 줄:
;textarea 자동 크기 조절
;textarea 자동 크기 조절


<source lang='html5'>
<syntaxhighlight lang='html5'>
<style> textarea {width:300px;overflow:visible;} </style>
<style> textarea {width:300px;overflow:visible;} </style>
<textarea>Hello world</textarea>
<textarea>Hello world</textarea>
</source>
</syntaxhighlight>
*IE든 크롬이든 최초 문자열의 크기에 맞게 TEXTAREA 세로 크기가 정해진다.
*IE든 크롬이든 최초 문자열의 크기에 맞게 TEXTAREA 세로 크기가 정해진다.
*이후에 텍스트를 입력하면...
*이후에 텍스트를 입력하면...
:IE8에서는 그에 맞게 TEXTAREA의 세로 크기가 늘어난다.
:IE8에서는 그에 맞게 TEXTAREA의 세로 크기가 늘어난다.
:크롬에서는 늘어나지 않고, 대신 스크롤이 생긴다...
:크롬에서는 늘어나지 않고, 대신 스크롤이 생긴다...
* [[CSS transition]]과 함께 쓰면 제대로 작동하지 않더라.


==방법 1: JavaScript==
==방법 1: JavaScript==
내용물 높이에 맞춰주는 스크립트를 추가하면 크롬에서도 자동맞춤이 된다.
내용물 높이에 맞춰주는 스크립트를 추가하면 크롬에서도 자동맞춤이 된다.
<source lang='html'>
<syntaxhighlight lang='html'>
<style>
textarea.autosize { min-height: 50px; }
</style>
 
<textarea class="autosize" onkeydown="resize(this)" onkeyup="resize(this)" placeholder="추가 바람"></textarea>
 
<script>
<script>
function resize(obj) {
function resize(obj) {
   obj.style.height = "1px";
   obj.style.height = "1px";
   obj.style.height = (20+obj.scrollHeight)+"px";
   obj.style.height = (12+obj.scrollHeight)+"px";
}
}
</script>
</script>
<textarea onkeyup="resize(this)">Hello world</textarea>
</syntaxhighlight>
</source>
<jsfiddle height='250'>nmx8xnav</jsfiddle>
<jsfiddle height='250'>nmx8xnav</jsfiddle>


==방법 2: jQuery==
==방법 2: jQuery==
방법 1과 동일하게 jQuery로 구현
방법 1과 동일하게 jQuery로 구현
<source lang='html'>
<syntaxhighlight lang='html'>
<style>
<style>
textarea.autosize { min-height: 50px; }
textarea.autosize { min-height: 50px; }
</style>
</style>
<textarea class="autosize" placeholder="추가 바람"></textarea>


<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
<script>
$(function() {
$("textarea.autosize").on('keydown keyup', function () {
  $("textarea.autosize").on('keydown keyup', function () {
  $(this).height(1).height( $(this).prop('scrollHeight')+12 );
    $(this).height(1).height( $(this).prop('scrollHeight')+11 );
  });
});
});
</script>
</script>
<textarea class="autosize">Hello world</textarea>
</syntaxhighlight>
</source>
<jsfiddle height='250'>enwrLgwa</jsfiddle>
<jsfiddle height='250'>enwrLgwa</jsfiddle>


49번째 줄: 54번째 줄:
*[[HTML textarea 태그]]
*[[HTML textarea 태그]]
*[[CSS overflow 속성]]
*[[CSS overflow 속성]]
*[[CSS contenteditable 속성]]


==참고 자료==
==참고==
*http://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length
*http://stackoverflow.com/questions/995168/textarea-to-resize-based-on-content-length


[[분류:TEXTAREA]]
[[분류:TEXTAREA]]
[[분류:JavaScript]]
[[분류:JavaScript]]

2020년 11월 2일 (월) 02:51 기준 최신판

1 개요

textarea overflow visible
textarea auto resize in html on chrome
textarea 높이 내용물에 맞추기
textarea 자동 크기 조절
<style> textarea {width:300px;overflow:visible;} </style>
<textarea>Hello world</textarea>
  • IE든 크롬이든 최초 문자열의 크기에 맞게 TEXTAREA 세로 크기가 정해진다.
  • 이후에 텍스트를 입력하면...
IE8에서는 그에 맞게 TEXTAREA의 세로 크기가 늘어난다.
크롬에서는 늘어나지 않고, 대신 스크롤이 생긴다...

2 방법 1: JavaScript

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

<style>
textarea.autosize { min-height: 50px; }
</style>

<textarea class="autosize" onkeydown="resize(this)" onkeyup="resize(this)" placeholder="추가 바람"></textarea>

<script>
function resize(obj) {
  obj.style.height = "1px";
  obj.style.height = (12+obj.scrollHeight)+"px";
}
</script>

3 방법 2: jQuery

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

<style>
textarea.autosize { min-height: 50px; }
</style>

<textarea class="autosize" placeholder="추가 바람"></textarea>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$("textarea.autosize").on('keydown keyup', function () {
  $(this).height(1).height( $(this).prop('scrollHeight')+12 );	
});
</script>

4 같이 보기

5 참고

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}