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

잔글 ("HTML textarea 자동 높이 조절" 문서를 보호했습니다 ([편집=자동 인증된 사용자만 허용] (무기한) [이동=자동 인증된 사용자만 허용] (무기한)))
(사용자 7명의 중간 판 31개는 보이지 않습니다)
1번째 줄: 1번째 줄:
==개요==
;textarea overflow visible
;textarea overflow visible
;textarea auto resize in html on chrome
;textarea auto resize in html on chrome
4번째 줄: 5번째 줄:
;textarea 자동 크기 조절
;textarea 자동 크기 조절


==소스 코드1==
<source lang='html5'>
<source 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>
</source>
*예제: http://zetawiki.com/ex/js/textarea_overflow.php
*IE든 크롬이든 최초 문자열의 크기에 맞게 TEXTAREA 세로 크기가 정해진다.
*IE든 크롬이든 최초 문자열의 크기에 맞게 TEXTAREA 세로 크기가 정해진다.
*이후에 텍스트를 입력하면...
*이후에 텍스트를 입력하면...
:IE8에서는 그에 맞게 TEXTAREA의 세로 크기가 늘어난다.
:IE8에서는 그에 맞게 TEXTAREA의 세로 크기가 늘어난다.
:크롬에서는 늘어나지 않고, 대신 스크롤이 생긴다...
:크롬에서는 늘어나지 않고, 대신 스크롤이 생긴다...
* [[CSS transition]]과 함께 쓰면 제대로 작동하지 않더라.


==소스 코드2==
==방법 1: JavaScript==
내용물 높이에 맞춰주는 스크립트를 추가하면 크롬에서도 자동맞춤이 된다.
내용물 높이에 맞춰주는 스크립트를 추가하면 크롬에서도 자동맞춤이 된다.
<source lang='html5'>
<source lang='html'>
<style> textarea {width:300px;overflow:visible} </style>
<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 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>
</source>
</source>
*예제: http://zetawiki.com/ex/js/textarea_overflow2.php
<jsfiddle height='250'>nmx8xnav</jsfiddle>
 
==방법 2: jQuery==
방법 1과 동일하게 jQuery로 구현
<source lang='html'>
<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>
</source>
<jsfiddle height='250'>enwrLgwa</jsfiddle>


==같이 보기==
==같이 보기==
*[[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]]

2019년 5월 27일 (월) 17:08 판

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 }}