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.
<html>
<head>
<script language="JavaScript">
<!--
function openWin(){
var myInstance = document.myForm.myText;
var myWin = open("", "","width=450,height=200");
myWin.document.write("The defaultValue is: " + myInstance.defaultValue);
myWin.document.write("<br>");
myWin.document.write("The name is: " + myInstance.name + "<br>");
myWin.document.write("The type is: " + myInstance.type + "<br>");
myWin.document.write("The value is: " + myInstance.value + "<br>");
myWin.document.write(myInstance.form.myButton.value);
myWin.document.close();
}
-->
</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>
Text.blur()
The blur() method removes focus from the text box.
<html>
<head>
<script language="JavaScript">
<!--
function removeFocus(){
document.myForm.myText.blur();
}
-->
</script>
</head>
<body>
<b>Highlight some of the text in the following text box:</b>
<P>
<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>
Text.defaultValue
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.
<html>
<head>
<script language="JavaScript">
<!--
function resetForm(){
document.myForm.myText.value = document.myForm.myText.defaultValue;
}
-->
</script>
</head>
<body>
<b>Edit the text in the following text box:</b>
<P>
<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>
Text.focus()
The focus() method gives focus to the text box.
<html>
<head>
<script language="JavaScript">
<!--
function setFocus(num){
if(num == 1){
document.myForm.myText1.focus();
}else if(num == 2){
document.myForm.myText2.focus();
}
}
-->
</script>
</head>
<body>
<P>
<form name="myForm">
<input type=TEXT value="Textbox 1" name="myText1">
<input type=BUTTON value="Click to Set Cursor" name="myButton1"
onClick="setFocus(1)">
<br>
<input type=TEXT value="Textbox 2" name="myText2">
<input type=BUTTON value="Click to Set Cursor" name="myButton2"
onClick="setFocus(2)">
</form>
</body>
</html>
Text.form
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.
<html>
<head>
<script language="JavaScript">
<!--
function openWin(){
var formData = document.myForm.myText.form;
var myWin = open("", "","width=450,height=200");
myWin.document.write("The name of the form is: " + formData.name + "<br>");
myWin.document.write(formData.myText.value + "<br>");
myWin.document.write(formData.elements[1].name + "<br>");
myWin.document.close();
}
-->
</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>
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.
<html>
<head>
<script language="JavaScript">
<!--
function getName(){
alert("The name of this text box is " + document.myForm.elements[0].name);
}
-->
</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>
Text.onBlur
The onBlur event handler is fired when the focus is moved away from that particular text box.
<html>
<head>
<script language="JavaScript">
<!--
var counter = 0;
function comeBack(){
document.myForm.myText1.focus();
document.myForm.counter.value = counter++;
}
-->
</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"><br>
<input type=TEXT size=2 value="" name="counter">
</form>
</body>
</html>
Text.onFocus
The onFocus event handler is fired when focus is made on that particular text box.
<html>
<head>
<script language="JavaScript">
<!--
var counter = 0;
function sendAway(){
document.myForm.myText2.focus();
document.myForm.counter.value = counter++;
}
-->
</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"><br>
<input type=TEXT size=2 value="" name="counter">
</form>
</body>
</html>
Text.onSelect
The onSelect event handler is fired when the text in the box is highlighted.
<html>
<head>
<script language="JavaScript">
<!--
function setText(){
document.myForm.myText2.value = document.myForm.myText1.defaultValue;
}
-->
</script>
</head>
<body>
<form name="myForm">
<input type=TEXT value="Change Me?" name="myText1" onSelect="setText()">
<br>
<input type=TEXT value="" name="myText2">
</form>
</body>
</html>
Text.select()
The select() method selects the text in the text box.
<html>
<head>
<script language="JavaScript">
<!--
function selectText(){
document.myForm.myText.select();
document.myForm.myText.focus();
}
-->
</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>
Text.type
The type property returns the type of the text box. This always returns text.
<html>
<head>
<script language="JavaScript1.1">
<!--
function getType(){
alert("The name of this text box is " + document.myForm.elements[0].type);
}
-->
</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>
Text.value
The value property returns the current value of the text box.
<html>
<head>
<script language="JavaScript">
<!--
function resetText(){
document.myForm.myText.value = document.myForm.myText.defaultValue;
}
-->
</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>