<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를 늘려주는 부분입니다.
* 이 소스의 문제점.. 글을 지울 때 백스페이스로 지웠다가는 엄청나게 한줄로 바뀝니다.ㅋㅋㅋㅋ
대신에 글의 끝에서 백스페이스나 엔터키를 누르면 다시 정상적으로 돌아옵니다.ㅋㅋㅋ