JavaScript Tutorial/Form/Text TextField — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Текущая версия на 11:24, 26 мая 2010
Содержание
- 1 Capture key event in a textfield
- 2 Compare the value in TextField
- 3 Displaying the value entered in a text field
- 4 Getting and Setting a Text Object"s value Property
- 5 onFocus event handler
- 6 Refresh the TextField box automatically
- 7 Resetting a Text Object to Default Value
- 8 Retrieving Text in form button action
- 9 Retrieving Text
Capture key event in a textfield
<source lang="javascript">
<html> <head> <script language="JavaScript" type = "text/javascript">
</script>
<title>Capture Key Pressed</title>
</head>
<body>
<form name="form1">
Type value in field: See what you typed:
<input type = "text" name = "text1" onKeyPress="DisplayMsg(event)" size="20">
<input type = "text" name = "text2" onKeyPress="DisplayMsg(event)" size="20">
</form>
</body>
</html></source>
Compare the value in TextField
<source lang="javascript">
<HTML> <HEAD>
<TITLE>Validate</TITLE>
<SCRIPT> function checkLawyer(str) {
if ((str.toUpperCase() == "LAWYER") || (str.toUpperCase() == "ATTORNEY")) alert ("Lawyers are not wanted here..."); else alert("Your application will be evaluated!");
} </SCRIPT> </HEAD> <BODY> <FORM name="theForm"> Enter Your Profession: <INPUT type=text name="userProf"> <INPUT type=button
name="theButton" value="SUBMIT QUERY" onClick="checkLawyer(window.document.theForm.userProf.value)";>
</FORM> </BODY> </HTML></source>
Displaying the value entered in a text field
<source lang="javascript">
<html> <head> <title>Displaying the value entered in a text field</title> <script type="text/javascript" language="javascript">
</script> </head> <body> <form name="MyForm" action="http://www.wbex.ru/" method="Post" onsubmit="DisplayValue()">
<input type="text" name="MyTextField"/>Enter your name
<input type="submit" value="Click to Submit"/> </form> </body> </html></source>
Getting and Setting a Text Object"s value Property
<source lang="javascript">
<html> <head> <title>Text Object value Property</title> <script type="text/javascript"> function upperMe() {
var field = document.forms[0].converter; var upperCaseVersion = field.value.toUpperCase(); field.value = upperCaseVersion;
} </script> </head> <body> <form onsubmit="return false"> <input type="text" name="converter" value="sample" onchange="upperMe()"> </form> </body> </html></source>
onFocus event handler
<source lang="javascript">
<html> <head> <script language="JavaScript" type = "text/javascript">
</script> <title>Keyboard Event</title> </head> <body> <form name="form1">
Name: <input type = "text" name = "text1" onFocus="DisplayMsg(1)" size="20">Phone: <input type = "text" name = "text2" onFocus="DisplayMsg(2)" size="20">
</form> </body> </html></source>
Refresh the TextField box automatically
<source lang="javascript">
<html> <head> <title>A Simple Page</title> <script language="JavaScript">
</script> </head> <body onload="gettime()"> <form name="clockform"> <input type="text" name="clock"> </form> </body> </html></source>
Resetting a Text Object to Default Value
<source lang="javascript">
<html> <head> <title>Text Object DefaultValue</title> <script type="text/javascript"> function upperMe(field) {
field.value = field.value.toUpperCase();
} function resetField(form) {
form.converter.value = form.converter.defaultValue;
} </script> </head> <body> <form onsubmit="window.focus(); return false"> Lowercase letters: <input type="text" id="convert" name="converter" value="sample" onchange="upperMe(this)" /> <input type="button" id="reset" value="Reset Field" onclick="resetField(this.form)" /> </form> </body> </html></source>
Retrieving Text in form button action
<source lang="javascript">
<html> <head> <title>Retrieving Text</title> <script language="javascript" type="text/javascript">
</script> </head> <body>
Retrieving Text
<form name="simpleForm">
<input type="text" name="myText" size="20" /> <input type="button" value="Alert Text" onclick="alertText()" />
</form> </body> </html></source>
Select all text in a TextBox
<source lang="javascript">
<html> <head> <title>Select Text Example</title> <script type="text/javascript"> function selectText() {
var oTextbox1 = document.getElementById("txt1"); oTextbox1.focus(); oTextbox1.select();
}
</script>
</head>
<body>
<input type="text" size="12" id="txt1" value="www.wbex.ru" />
<input type="button" value="Select Text" onclick="selectText()" />
</body>
</html></source>
TextArea onmouseup action event
<source lang="javascript">
<html> <head> <script type="text/javascript" language="javascript">
</script> </head> <body>
<input type="text" name="MyTextField" onblur="ChangeStatus()"/> | Enter your name |
<textarea name="Comments" rows="6" cols="40" onmouseup="CheckStatus()" >Please enter your name first</textarea> | Enter your comments. |
<input type="submit" value="Click to Submit"/> |
</form> </body> </html></source>
TextField onblur action event
<source lang="javascript">
<html> <head> <script type="text/javascript" language="javascript">
</script> </head> <body>
<input type="text" name="MyTextField" onblur="ChangeStatus()"/> | Enter your name |
<textarea name="Comments" rows="6" cols="40" onmouseup="CheckStatus()" >Please enter your name first</textarea> | Enter your comments. |
<input type="submit" value="Click to Submit"/> |
</form> </body> </html></source>
TextField requests focus
<source lang="javascript">
<html> <head> <title>Set Form focus</title> <script type="text/javascript" language="javascript">
</script> </head> <body onload="SetFocus()"> <form name="SimpleForm">
Enter first number: | <input name="FirstInput" type="text"> |
Enter second number: | <input name="SecondInput" type="text"> |
Enter third number: | <input name="ThirdInput" type="text"> |
<button type="Button" onclick="FindMaxAndMin()"> Click to calculate</button> |
</form> </body> </html></source>
Text Input Events
<source lang="javascript">
<HTML> <HEAD>
<TITLE>Text Input Events</TITLE>
</HEAD> <BODY> <SCRIPT> function handler(e){
if (navigator.appName == "Microsoft Internet Explorer"){ e = window.event; alert("Event Type: " + e.type); if (e.keyCode) alert("Keycode: " + String.fromCharCode(e.keyCode)); if (e.altKey) alert("Alt Key: " + e.altKey); if (e.ctrlKey) alert("Ctrl Key: " + e.ctrlKey); if (e.shiftKey) alert("Shift Key: " + e.shiftKey); } else { alert("Event Type: " + e.type); if (e.target) alert("Target: " + Object.prototype.toString.apply(e.target)); if (e.target.name) alert("Target Name: " + e.target.name); if (e.which) alert("Which: " + String.fromCharCode(e.which)); if (e.modifiers) alert("Modifiers: " + e.modifiers); }
}
function startForm(){
//document.theForm.userLname.onblur = handler; document.theForm.userLname.onchange = handler; //document.theForm.userLname.onfocus = handler; document.theForm.userLname.onkeydown = handler; document.theForm.userLname.onkeypress = handler; document.theForm.userLname.onkeyup = handler;
}
</SCRIPT> <FORM name="theForm"> Enter Your First Name: <INPUT type=text name="userLname"> <INPUT type=button name="theButton" value="START" onClick="startForm();"> </FORM> </BODY> </HTML></source>