jquery textarea 자동 늘어났다 줄어드는 방법

<Script language="JavaScript">
 function memoheight(){
  if (event.keyCode == 13){
   var etcmemo = $("#memo").val();
   var em_index = etcmemo.split('\n');
   var etcmemo_row = (em_index.length * 1) +1;
   memo_l_height = (18 * (etcmemo_row * 1)) + 4
   memo_r_height = ((memo_l_height * 1) + 4)
   memo_height = (18 * (etcmemo_row * 1))

   $("#etc_memo").attr('style', 'height:'+memo_height+'px;width:95%;border:1px solid #D4DBE4;');
  }

 

  if (event.keyCode == 8){
   var etcmemo = $("#etc_memo").val();
   var em_index = etcmemo.split('\n');
   var etcmemo_row = (em_index.length * 1) - 1;
   if (etcmemo_row > 0){
    memo_l_height = (18 * (etcmemo_row * 1)) + 4
    memo_r_height = ((memo_l_height * 1) + 4)
    memo_height = (18 * (etcmemo_row * 1))

    $("#etc_memo").attr('style', 'height:'+memo_height+'px;width:95%;border:1px solid #D4DBE4;');
   }
  }
 }

</script>

 

<textarea name="memo" id="memo" style="width:95%;height:20px;border:1px solid #D4DBE4;" onKeyDown="javascript:memoheight();"><%=etc_memo%></textarea>

 

우슨 맨 밑의 textarea 소스를 보시면

onKeyDown에 javascript:memoheight();는 키보드에서 키를 눌렀다 땟을 때 저 스크립트로 가라는 부분입니다.

 

이제 맨 위의 소스에서 function memoheight()로 들어갔을 테고...

  if (event.keyCode == 13){               < == 이 부분은 엔터키를 의미합니다.

즉, 엔터키를 눌렀다 때면 이 if문을 실행하라는 것입니다.

 

  if (event.keyCode == 8){                < == 이 부분은 백스페이스를 의미합니다.

즉, 백스페이스를 눌렀다 때면 이 if문을 실행하라는 것입니다.

 

if문 안에 잇는 내용은 뭐 그냥 단순 계산일 뿐이고

    $("#etc_memo").attr('style', 'height:'+memo_height+'px;width:95%;border:1px solid #D4DBE4;');

위의 소스 부분은 jquery로 style의 내용을 바꾸는 것입니다. 결정적으로 height를 늘려주는 부분입니다.

 

* 이 소스의 문제점.. 글을 지울 때 백스페이스로 지웠다가는 엄청나게 한줄로 바뀝니다.ㅋㅋㅋㅋ

대신에 글의 끝에서 백스페이스나 엔터키를 누르면 다시 정상적으로 돌아옵니다.ㅋㅋㅋ