Friday, May 13, 2016

HTML textarea 속성 - 자동 높이 조절(auto resize) 예제

<textarea>


집이 멀어서 금요일에 칼퇴를
해본들 고속도로에서 보내는
시간이 더 많기 때문에 퇴근을
안하다가 지금까지 회사에 있네요.
퇴근하기 전에 정말 간단한 예제나
하나 올리고 퇴근하렵니다~
내일 강화도로 놀러가서 이틀동안
블로그 포스팅을 할 수 없으니
짜잘한 내용으로 얼른 포스팅 하나
하고 집에 가서 내일 갈 준비해야죠~

아 참고로 이 포스팅은 전에 올린
modal에 연장된 글입니다~



위에 캡처화면은 모달을 띄워서
textarea에 특정 값을 보여주는
창인데;;;; 대괄호, 중괄호 두 개만
보이고 정작 중요할 것 같은 부분은
아예 보이질 않네요... 생각 같아서는
resize 어트리뷰트 하나 주면 되지
않을까 생각해보지만 제 생각대로
되는게 세상에 몇 가지나 있겠습니까?ㅋ


위에 띄운 modal 창에 있는
textarea 태그입니다. 보시면

onfocus="resize(this)" 

라는 부분이 보이는데 텍스트 영역
(textarea)에 포커스가 맞춰지면
자동으로 안에 내용에 맞게 textzrea의
높이를 조절해주는 resize 함수를
호출하고 있습니다.

resize 함수는 아래와 같습니다.


함수 밖에 있는 elasticModal 어쩌고
저쩌고 하는 부분은 모달창을 띄우는
부분이니 무시하시면 됩니다

강화도 여행 끝나고 와서 포스팅
남겨 놓겠습니다^^

No comments:

Post a Comment