textarea 자동 높이값

이슈 :

• 장바구니 Page 배송지 정보 Area
• 주소 1번칸 : [우편번호 찾기]를 통해 입력받는 란
  ☆ 뿌려진 내용 길이에 맞게 한줄 or 여러줄로 높이 조정
  ★ textarea 를 써야함 ㅠ

해결 :

<style>
.addr {
  display:block; overflow:hidden; width:100%; height:2.7rem; padding:0.6rem;
  font-size:1.2rem; color:#000; border-radius:0.2rem; border:1px solid #ccc; resize:none;
 }
</style>
<textarea class="addr" readonly>서울특별시 강동구 동남로</textarea>
<textarea class="addr" readonly>서울특별시 강동구 동남로82길 107(고덕동서래마을2차)</textarea>
<script>
    var txtArea = $(".addr");
    if (txtArea) {
        txtArea.each(function(){
            $(this).height(this.scrollHeight);
        });
    }
</script>

결과 :

scrollHeight

수직 스크롤바가 있는 엘리먼트(element)의 CSS 높이를 초과하여, 보이지 않는 부분까지 포함한 내용(content)의 높이(height)입니다. scrollHeight의 값은 수직 스크롤바가 없는 clientHeight의 값과 같습니다.
해당 엘리먼트의 padding값을 포함하지만 margin값은 포함하지 않습니다.

clientHeight

엘리먼트의 내부 높이를 픽셀로 반환합니다. 이 내부 높이라는 것은 내부 여백(padding)을 포함하지만, 수평 스크롤바의 높이, 경계선, 또는 외부 여백(margin)은 포함하지 않습니다.
CSS상의 높이 + CSS상의 내부 여백 - 수평 스크롤바의 높이로 계산됩니다.

offsetHeight

returns the height of an element, including vertical padding and borders, as an integer. 즉, 스크롤바, 패딩, 테두리 다 포함~~!