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

잔글 (로봇: 자동으로 텍스트 교체 (-http://zetawiki.com/js/ +http://zetawiki.com/ex/js/))
9번째 줄: 9번째 줄:
<textarea>Hello world</textarea>
<textarea>Hello world</textarea>
</source>
</source>
*예제: http://zetawiki.com/js/textarea_overflow.php
*예제: http://zetawiki.com/ex/js/textarea_overflow.php
*IE든 크롬이든 최초 문자열의 크기에 맞게 TEXTAREA 세로 크기가 정해진다.
*IE든 크롬이든 최초 문자열의 크기에 맞게 TEXTAREA 세로 크기가 정해진다.
*이후에 텍스트를 입력하면...
*이후에 텍스트를 입력하면...
27번째 줄: 27번째 줄:
<textarea onkeyup="resize(this)">Hello world</textarea>
<textarea onkeyup="resize(this)">Hello world</textarea>
</source>
</source>
*예제: http://zetawiki.com/js/textarea_overflow2.php
*예제: http://zetawiki.com/ex/js/textarea_overflow2.php


==같이 보기==
==같이 보기==

2015년 7월 15일 (수) 01:05 판

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>
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 world</textarea>

3 같이 보기

4 참고 자료

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