Text Area Object :
The following syntax will get the Text Area object in javascript Syntax: document.formname.textarea
Example Code:
<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>
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>
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>
Result:
A Note
Javascript (JS) is one of the most used languages in the world. Some times spelled as Java Script.
Hope you enjoy this tutorial. Do send your feedback or suggestions on this javascript or java script tutorial. This is a copyright content.
Home
Scripts
Tutorials
Images
Tools
Purchase
Snippets
Introduction
