Entry

How can I set the height of Text Field?

Nov 13th, 2001 07:53
John Baleshiski, Enoch Ng,

You can dynamically set the width and height of textareas and input 
fields.  Here is some code:

<SCRIPT LANGUAGE=JavaScript>
<!--
	function limit(x, min, max)
	{	if((min != null) && (x < min)) { x = min; }
		if((max != null) && (x > max)) { x = max; }
		return x;
	}

	function resize_textarea(x, minw, minh, maxw, maxh)
	{	var rows = 0;
		var cols = 0;
		arrayOfStrings = x.value.split('\n')   
		for (var i=0; i < arrayOfStrings.length; i++) 
		{	var l = arrayOfStrings[i].length;
			cols = limit(cols, l, maxw);
			while(l > maxw)
			{	l -= maxw;
				rows++;
				cols = maxw;
			}
			rows++;
		}
		x.rows = limit(limit(rows, 1, null), minh, maxh);
		x.cols = limit(limit(cols, 1, null), minw, maxw);
	}

	function resize_input(x, min, max)
	{	x.size = limit(x.value.length, min, max);
	}
// -->
</SCRIPT>


The fields look like this:

<FORM NAME=form1>
<INPUT	name=fname 
	value="<First name>"  
	style="font-family:courier; font-size: 20px; border-
color:#FFFFFF; border-width:0px;"
	onfocus="setInterval('resize_input
(document.form1.fname,1,null)', 1)">

<INPUT 	name=lname 
	value="<Last name>" 
	style="font-family:courier; font-size: 20px; border-
color:#FFFFFF; border-width:0px;"
	onfocus="setInterval('resize_input
(document.form1.lname,1,null)', 1)">,
<P>
<TEXTAREA 
	id=txtComments 
	name=mybox 
	style="font-size: 20px; border-color:#FFFFFF; border-width:0px; 
Overflow:visible;"
	onfocus="setInterval('resize_textarea(document.form1.mybox, 
5,1,70,null)', 1)">Please enter text.</TEXTAREA>
</FORM>