JavaScript Tutorial/Form/Text Object
Содержание
Text
Instances are created by the browser when it encounters an HTML <input> tag with the TYPE attribute set to text.
Event Handlers/Methods/Properties Description onBlur Called when the text box loses the focus. onChange Called when the text box loses the focus and has had its value modified. onFocus when the text box receives the focus. onSelect when a user selects some of the text within the text box. blur() Removes the focus from the text box. focus() Gives the focus to the text box. handleEvent() Invokes the handler for the event specified and was added in JavaScript 1.2. select() Selects the text in the text box. defaultValue Returns the value of this text box specified by the VALUE attribute. Note that this property is not supported by the Opera browsers. form Returns the entire form the text box is in. name Returns the name of this text box specified by the NAME attribute. type Returns the type of this text box specified by the TYPE attribute. value Returns the value that is actually displayed in the text box.
<source lang="javascript">
<html>
<head>
<script language="JavaScript">
</script>
</head>
<body>
<form name="myForm">
<input type=TEXT value="hello world" name="myText">
<input type=BUTTON value="Click to Process" name="myButton" onClick="openWin()">
</form>
</body>
</html></source>
Text.blur()
The blur() method removes focus from the text box.
<source lang="javascript">
<html>
<head> <script language="JavaScript"> </script> </head> <body> Highlight some of the text in the following text box:
<form name="myForm"> <input type=TEXT value="hello world" name="myText"> <input type=BUTTON value="Click to Remove Focus" name="myButton" onClick="removeFocus()"> </form> </body> </html></source>
Text.defaultValue
<p>The defaultValue property contains the default value specified by the VALUE attribute of the <input> tag. This property is often used to reset forms to their default values.
<source lang="javascript">
<html>
<head> <script language="JavaScript"> </script> </head> <body> Edit the text in the following text box:
<form name="myForm"> <input type=TEXT value="hello world" name="myText"> <input type=BUTTON value="Click to Reset" name="myButton" onClick="resetForm()"> </form> </body> </html></source>
Text.focus()
<p>The focus() method gives focus to the text box.
<source lang="javascript">
<html>
<head> <script language="JavaScript"> </script> </head> <body>
<form name="myForm">
<input type=TEXT value="Textbox 1" name="myText1">
<input type=BUTTON value="Click to Set Cursor" name="myButton1"
onClick="setFocus(1)">
<input type=TEXT value="Textbox 2" name="myText2">
<input type=BUTTON value="Click to Set Cursor" name="myButton2"
onClick="setFocus(2)">
</form>
</body>
</html></source>
Text.form
<p>The form property holds all the data of the form in which the text box is contained.This allows a developer to obtain specific information about the form in which the text box is located.
<source lang="javascript">
<html>
<head>
<script language="JavaScript">
</script>
</head>
<body>
<form name="myForm">
<input type=TEXT value="hello world" name="myText">
<input type=BUTTON value="Click to Process" name="myButton"
onClick="openWin()">
</form>
</body>
</html></source>
Text.name
The name property returns the name of the text box.
This property is often accessed via the elements array of a Form object and used to return the name of the text area.
<source lang="javascript">
<html>
<head>
<script language="JavaScript">
</script>
</head>
<body>
<form name="myForm">
<input type=TEXT value="First Box" name="myText">
<input type=BUTTON value="Get Name" name="myButton" onClick="getName()">
</form>
</body>
</html></source>
Text.onBlur
The onBlur event handler is fired when the focus is moved away from that particular text box.
<source lang="javascript">
<html>
<head>
<script language="JavaScript">
</script>
</head>
<body onLoad="comeBack()">
<form name="myForm">
<input type=TEXT value="First Box" name="myText1" onBlur="comeBack()">
<input type=TEXT value="Second Box" name="myText2">
<input type=TEXT size=2 value="" name="counter">
</form>
</body>
</html></source>
Text.onFocus
The onFocus event handler is fired when focus is made on that particular text box.
<source lang="javascript">
<html>
<head>
<script language="JavaScript">
</script>
</head>
<body onLoad="sendAway()">
<form name="myForm">
<input type=TEXT value="First Box" name="myText1" onFocus="sendAway()">
<input type=TEXT value="Second Box" name="myText2">
<input type=TEXT size=2 value="" name="counter">
</form>
</body>
</html></source>
Text.onSelect
The onSelect event handler is fired when the text in the box is highlighted.
<source lang="javascript">
<html>
<head>
<script language="JavaScript">
</script>
</head>
<body>
<form name="myForm">
<input type=TEXT value="Change Me?" name="myText1" onSelect="setText()">
<input type=TEXT value="" name="myText2">
</form>
</body>
</html></source>
Text.select()
The select() method selects the text in the text box.
<source lang="javascript">
<html>
<head>
<script language="JavaScript">
</script>
</head>
<body>
<form name="myForm">
<input type=TEXT value="hello world" name="myText">
<input type=BUTTON value="Click to Select Text" name="myButton" onClick="selectText()">
</form>
</body>
</html></source>
Text.type
The type property returns the type of the text box. This always returns text.
<source lang="javascript">
<html>
<head>
<script language="JavaScript1.1">
</script>
</head>
<body>
<form name="myForm">
<input type=TEXT value="First Box" name="myText">
<input type=BUTTON value="Get Type" name="myButton" onClick="getType()">
</form>
</body>
</html></source>
Text.value
The value property returns the current value of the text box.
<source lang="javascript">
<html>
<head>
<script language="JavaScript">
</script>
</head>
<body>
<form name="myForm">
<input type=TEXT value="First Box" name="myText">
<input type=BUTTON value="Reset" name="myButton" onClick="resetText()">
</form>
</body>
</html></source>
