인터넷정보

글쓰기폼 늘리기 - 확장, 축소

알 수 없는 사용자 2007. 10. 18. 14:02
첫번째 방법(자동)
<script language="javascript">
function setLine( txa ){
  line = 7 //기본 줄 수
  new_line = txa.value.split( "\n" ).length + 1;
  if( new_line < line ) new_line = line;
  txa.rows = new_line;
}
</script>
<textarea name="memo" scol rows=7 onKeyDown="setLine( this )" style='overflow-y:auto; overflow-x:hidden; width:100%;'> </textarea>



두번째 방법(자동)
<textarea name="memo" style="width:100%;height:100;border:1 solid #E3E3E3;overflow:visible;text-overflow:ellipsis;"> </textarea>



세번째 방법(수동)
<SCRIPT>
var timer_id = null;
var timer_min = 100;                // 타이머 최소 시간 간격 ( 이 간격이하로는 더 줄지 않습니다 )
var timer_max = 300;                // 타이머 최대 시간 간격
var timer_interval = timer_max;        // 타이머 시간 간격 (msec)
var timer_interval_desc = 50;        // 타이머 시간 간격 감소량 (mes)  ( 가속을 흉내내려고 -_-;;;;; )
var min_rows = 7;                // 최소 줄수
var max_rows = 25;                // 최대 줄수

function enlarge( obj, delta )
{
        obj = (typeof obj == "string" ? document.getElementById(obj) : obj);
        if (obj.rows + delta <= min_rows ) {
                obj.rows = min_rows;
                return;
        } else         if (obj.rows + delta >= max_rows ) {
                obj.rows = max_rows;
                return;
        }
        else obj.rows = obj.rows + delta;

        if (timer_interval > timer_min) timer_interval = timer_interval - timer_interval_desc;
        timer_id = setTimeout( "enlarge('" + obj.id + "', " + delta + ");", timer_interval );
}

function enlarge_stop( obj )
{
        timer_interval = timer_max;
        clearTimeout(timer_id);
}
</SCRIPT>
<TABLE>
<TR>
<TD style="vertical-align:top;padding-top:3px;padding-bottom:3px;font-size:9pt" align=right>
<IMG src="btn_up.gif" onmousedown="enlarge('contents',-2);" onmouseup="enlarge_stop('contents');" onmouseout="enlarge_stop('contents');" vspace=2> <BR>
<IMG src="btn_down.gif" onmousedown="enlarge('contents',+2);" onmouseup="enlarge_stop('contents');" onmouseout="enlarge_stop('contents');" vspace=2>  
</TD>
<TD style="vertical-align:top;padding-top:3px;padding-bottom:3px">
<TEXTAREA NAME="contents" ID="contents" ROWS=5 cols=60 style="border:1px solid #c0c0c0"></TEXTAREA><BR>
</TD>
</TR>
</TABLE>

네번째(확장만 됨)
<textarea onKeyup="var a=100; var b=this.scrollHeight;if(b>=a)this.style.pixelHeight=b+6" style='overflow-y:auto; overflow-x:hidden;height:100; width:100%;'></textarea>
반응형