textarea 자동 높이 설정하기. > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

textarea 자동 높이 설정하기. 정보

JavaScript textarea 자동 높이 설정하기.

본문

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 세로로만 사이즈 조절하라. 소스 끝. 소스 잘됩니다.

 

 

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

추천
2

댓글 1개

전체 5,352
개발자팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT