테스트 사이트 - 개발 중인 베타 버전입니다

textarea 자동 높이 설정하기.

· 1년 전 · 1295 · 1

https://zetawiki.com/wiki/HTML_textarea_%EC%9E%90%EB%8F%99_%EB%86%92%EC%9D%B4_%EC%A1%B0%EC%A0%88

 

여기서 부족한 소스

 

CSS 딱 딸랑 1개  -> textarea {min-height: 50px; resize:vertical;}
 

자바스크립트  -소스는 12로 규정되어 있지만. 자연스러움은 1로 해야하는게 자연스럽다는게...묘한...

 

function resize(obj) {
  obj.style.height = "1px";  
obj.style.height = (1+obj.scrollHeight)+"px";

}

 

html 태그

 

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

CSS 태그

 

textarea {min-height: 50px; resize:vertical;} overflow-x 기능으로 가로 막기가 안되어서 resize로 가로방지.
 

테스트 잘하고 적습니다. 참고로 scrollHeight는 앞서 1로 하면 무시해도 편함. 숫자를 변형시키면 재계산 해야 함.

 

resize:vertical 세로로만 사이즈 조절하라. 소스 끝. 소스 잘됩니다.

 

 

-------설명은 복잡하지만... 일단 그냥 복사후 쓰고 보세요.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 1개

제목이라도 똑바로 쓰던가 ㅋㅋ

진짜 가지가지 한다

게시글 목록

번호 제목
17819
17818
17817
17816
17814
17811
17810
17809
17808
17803
17799
17798
17797
17795
17794
17793
JavaScript JSON Beautify
17790
17789
17786
17774
17760
17755
17750
17729
17722
17714
17708
17686
17676
17666