Text field Object, dom textfield events - Javascript (JS) Tutorial

Topic

How to dynamically bring cursor pointer to Text Field using javascript?
or
What are the events associated with form type textfield?

Explanation

Basics of HTML form input

Text Object :
The following syntax will get the Text Field input box object in javascript
Syntax: document.formname.textname

Example Code:
<form name=testform>
<input name=textn value=test type=text>
</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 Field:
All the examples below use a javascript function output
<script language=javascript>
function output()
{
alert("testing Text events");
}
</script>

Event Handler	Description	Example
onMouseOver	onMouseOver is invoked when a mouse is moved over the text field	<input type=text onMouseOver="output()"> Result:
onMouseDown	onMouseDown is invoked when a mouse is pressed down inside the input box	<input type=radio onMouseDown="output()"> Result:
onMouseUp	onMouseUp is invoked when a mouse is pressed down inside the text field and released	<input type=text onMouseUp="output()"> Result:
onClick	onClick is invoked when a mouse click is done inside the input box	<input type=text onClick="output()"> Result:
onBlur	onBlur Executes some code when the text field loses focus using tab	<input type=text onBlur="output()"> Result:
onFocus	onFocus Executes some code when the text field gets the focus using tab	<input type=text onFocus="output()"> Result:

DOM Properties:
The following are the list of DOM (Dynamic Object Model) properties that can be used to get and alter Text Field properties in javascript.
The below examples are based on the form
<form name=form1>
<input name=testf type=text value=xxx>
</form>

DOM Property	Description	Example
defaultValue	Used to get and set the default value of the text field	To Get: var ss = document.form1.textf.defaultValue;
form	Used to get the parent node (form object) of this Text Node	To Get: var ss = document.form1.textf.form;
name	Used to get Text Field name	To Get: var ss = document.form1.textf.name;
type	Used to get form type	To Get: var ss = document.form1.textf.type;
value	Used to set or get Text Field value	To Get: var ss = document.form1.textf.value; To Set:: document.form1.textf.value = "testy";
size	Used to set or get Text Field size	To Get: var ss = document.form1.textf.size; To Set:: document.form1.textf.size = 4;
readOnly	Used to check or change readonly property. Users cannot enter any value if the text field is set as readonly.	To Check: var ss = document.form1.textf.readOnly; To Set:: document.form1.textf.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 field selection using javascript.

DOM Method	Description	Example
select()	Used to dynamically select a text field	To Select: document.form1.textf.select();
blur()	Used to dynamically make the Text Field blur	To Blur: document.form1.textf.blur();
focus()	Used to dynamically get focus on the Text Field	To Focus: document.form1.textf.focus();

Example: Making Text Field Select on a button Mouse Over

Result:

Textfield Object