Text Area Object
How to dynamically change the size of Text Area using javascript?
or
What are the events associated with form type textarea?
Explanation
Basics of HTML form textarea
Text Area Object :
The following syntax will get the Text Area object in javascript
Syntax: document.formname.textarea
<form name=testform>
<textarea name=textn > testing text area </textarea>
</form>
<script language="javascript">
var cbobject= document.testform.textn;
</script>
Here are the events, dom properties and method associated with Text element.
Event Handlers: Associated with Form type Text Area
All the examples below use a javascript function output
DOM Properties:
The following are the list of DOM (Dynamic Object Model) properties that can be used to get and alter TextArea properties in javascript.
The below examples are based on the form
DOM Methods:
The following are the list of DOM (Dynamic Object Model) methods that can be used to do dynamic changes like dynamic text area selection using javascript.
Text Area Object :
The following syntax will get the Text Area object in javascript
Syntax: document.formname.textarea
Example:
<form name=testform>
<textarea name=textn > testing text area </textarea>
</form>
<script language="javascript">
var cbobject= document.testform.textn;
</script>
Here are the events, dom properties and method associated with Text element.
Event Handlers: Associated with Form type Text Area
All the examples below use a javascript function output
<script language=javascript>
function output()
{
alert("testing TextArea");
}
</script>
function output()
{
alert("testing TextArea");
}
</script>
| Event Handler | Description | Example |
| onMouseOver | onMouseOver is invoked when a mouse is moved over the text area | <textarea name=textn onMouseOver="output()"> testing text area </textarea> Result : |
| onMouseDown | onMouseDown is invoked when a mouse is pressed down inside the text area | <textarea name=textn onMouseDown="output()"> testing text area </textarea> Result : |
| onMouseUp | onMouseUp is invoked when a mouse is pressed down inside the text area and released | <textarea name=textn onMouseUp="output()"> testing text area </textarea> Result : |
| onClick | onClick is invoked when a mouse click is done inside the text area | <textarea name=textn onClick="output()"> testing text area </textarea> Result : |
| onBlur | onBlur Executes some code when the text area loses focus using tab | <textarea name=textn onBlur="output()"> testing text area </textarea> Result : |
| onFocus | onFocus Executes some code when the text area gets the focus using tab | <textarea name=textn onFocus="output()"> testing text area </textarea> Result : |
DOM Properties:
The following are the list of DOM (Dynamic Object Model) properties that can be used to get and alter TextArea properties in javascript.
The below examples are based on the form
<form name=form1>
<textarea name=textn> testing text area </textarea>
</form>
<textarea name=textn> testing text area </textarea>
</form>
| DOM Property | Description | Example |
| defaultValue | Used to get and set the default value of the text area | To Get: var ss = document.form1.textn.defaultValue; |
| form | Used to get the parent node (form object) of this Text area Node | To Get: var ss = document.form1.textn.form; |
| name | Used to get TextArea name | To Get: var ss = document.form1.textn.name; |
| type | Used to get form type | To Get: var ss = document.form1.textn.type; |
| value | Used to set or get Text Area value | To Get: var ss = document.form1.textn.value; To Set:: document.form1.textn.value = "testy"; |
| size | Used to set or get Text Area size | To Get: var ss = document.form1.textn.size; To Set:: document.form1.textn.size = 4; |
| readOnly | Used to check or change readonly property. Users cannot enter any value if the text area is set as readonly. | To Check: var ss = document.form1.textn.readOnly; To Set:: document.form1.textn.readOnly = true; |
DOM Methods:
The following are the list of DOM (Dynamic Object Model) methods that can be used to do dynamic changes like dynamic text area selection using javascript.
| DOM Method | Description | Example |
| select() | Used to dynamically select a text area | To Select: document.form1.textn.select(); |
| blur() | Used to dynamically make the Text Area blur | To Blur: document.form1.textn.blur(); |
| focus() | Used to dynamically get focus on the Text Area | To Focus: document.form1.textn.focus(); |
Example:
Making Text Area Focus on a button Mouse Over <script language=javascript>
function rbevent()
{
var xx = document.xx.testarea.focus();
var xx = document.xx.testarea.readOnly=false;
}
function rbeventq()
{
var xx = document.xx.testarea.readOnly=true;
}
</script>
<form name=xx>
<textarea name="testarea"> Testing text area </textarea>
<input type=button name=rbtest value=test onMouseOut="rbeventq()"" onMouseOver="rbevent()">
</form>
function rbevent()
{
var xx = document.xx.testarea.focus();
var xx = document.xx.testarea.readOnly=false;
}
function rbeventq()
{
var xx = document.xx.testarea.readOnly=true;
}
</script>
<form name=xx>
<textarea name="testarea"> Testing text area </textarea>
<input type=button name=rbtest value=test onMouseOut="rbeventq()"" onMouseOver="rbevent()">
</form>
