View Full Version : textfield to textarea

09-26-2011, 05:24 PM
Hi all.

I have a textfield on my form problem. My boss wants it as a textfield to keep the field small on the page but still wants to be able to read all of the information that is in the field. What can I do with this?? Can we have change to textarea when he hovers to clicks in it. Any help would be appreciated.

09-26-2011, 05:35 PM
You could use some logic like this (obviously it could be written much nicer with style, javascript and html separated, but I'll leave that up to you):

<textarea style="height:20px" onfocus="this.style.height='100px'" onblur="this.style.height='20px'"></textarea>

Philip M
09-26-2011, 05:36 PM
A textfield can only contain a single line of text.

This may be of use:-

<input name = "txt1" size = "10" onkeyup="var t2=this.value.length; if(t2< 10){this.size=10;return;} if(t2>80){ this.size=80;return;} this.size=t2;" />All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

09-26-2011, 05:37 PM
The easiest way to solve this is with CSS:

<style type="text/css">

border:1px solid black;


<textarea id="mytxtarea" class="mytxtarea"></textarea>

Sounds like your boss is kind of a jerk. :)

Philip M
09-26-2011, 05:58 PM
The easiest way to solve this is with CSS:

It is important to specify standards-compliant mode using
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
if :hover is to work on non-anchor elements in Internet Explorer.

09-26-2011, 11:24 PM
I tried the below textfield with a value included.How do I get the value to wrap once it changes to a textarea??

Project Notes:<br>
<input type ="text"
value ="this is a test for this new texfield to textarea provided by the guys at codingforums.com"
onfocus ="this.style.height='100px'"
onblur ="this.style.height='20px'"
name ="notes"
class ="textfield"
size ="50">

Philip M
09-27-2011, 08:21 AM
I don't think you can change a text field into a text area. And a text field may contain only one line of text.