View source for JavaScript - Increasing Rows in a Text Area

= Overview =


A text area is a special type of HTML object which is used for capturing large amounts of text.  The challenge is that there is limited space on a web page.  There is a very easy way to make space dynamically change using the following capability.



= Result =


We start with a text area in form.  In this example... "Description"


[[File:Textarea_001.png|800px]]


The resulting output gives you a lot more space.


[[File:Textarea_003.png|800px]]



= Setup =


We are going to edit the questions, using the details from the very top of the page.


We add some JavaScript to the onFocus and the onBlur of the question.


<syntaxhighlight lang="javascript">
document.getElementById("strCDA_292_field_0_2").rows = "10";
</syntaxhighlight>


You change the strCDA_292_field_0_2 to whatever your text area is.


The default text area is 5 rows.  When the cursor goes into the text area, the row count doubles to 10.  When the cursor moves out to another field, the row count reduces back to 5.


[[File:Textarea_002.png|800px]]


[[Category:Topic:JavaScript]]