http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_Tutorial%2FForm%2FText_TextField
JavaScript Tutorial/Form/Text TextField - История изменений
2026-04-04T21:13:46Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_Tutorial/Form/Text_TextField&diff=9135&oldid=prev
Admin: 1 версия
2010-05-26T08:24:49Z
<p>1 версия</p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 08:24, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
Admin
http://wbex.ru/index.php?title=JavaScript_Tutorial/Form/Text_TextField&diff=9134&oldid=prev
в 18:52, 25 мая 2010
2010-05-25T18:52:56Z
<p></p>
<p><b>Новая страница</b></p><div>== Capture key event in a textfield==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript" type = "text/javascript"><br />
<!--<br />
document.onkeypress = DisplayMsg;<br />
function DisplayMsg(key_event)<br />
{<br />
if (document.all) //Checks for IE 4.0 or later<br />
{<br />
document.form1.text2.value = String.fromCharCode(event.keyCode);<br />
}<br />
else if (document.getElementById) //checks for Netscape 6 or later<br />
{<br />
document.form1.text2.value = String.fromCharCode(key_event.which);<br />
}<br />
else if (document.layers) //Checks for Netscape 4<br />
{<br />
document.form1.text2.value = String.fromCharCode(key_event.which);<br />
}<br />
}<br />
//--><br />
</script><br />
<title>Capture Key Pressed</title><br />
</head><br />
<body><br />
<form name="form1"><br />
<b>Type value in field:&nbsp; See what you typed:</b><br><br />
<input type = "text" name = "text1" onKeyPress="DisplayMsg(event)" size="20"><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<input type = "text" name = "text2" onKeyPress="DisplayMsg(event)" size="20"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Compare the value in TextField==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<HTML><br />
<HEAD><br />
<TITLE>Validate</TITLE><br />
<SCRIPT><br />
function checkLawyer(str) { <br />
if ((str.toUpperCase() == "LAWYER") || (str.toUpperCase() == "ATTORNEY"))<br />
alert ("Lawyers are not wanted here...");<br />
else<br />
alert("Your application will be evaluated!");<br />
}<br />
</SCRIPT><br />
</HEAD><br />
<BODY><br />
<FORM name="theForm"><br />
Enter Your Profession:<br />
<INPUT type=text name="userProf"><br />
<INPUT type=button <br />
name="theButton" <br />
value="SUBMIT QUERY" <br />
onClick="checkLawyer(window.document.theForm.userProf.value)";><br />
</FORM> <br />
</BODY><br />
</HTML></source><br />
<br />
<br />
<br />
== Displaying the value entered in a text field==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Displaying the value entered in a text field</title><br />
<script type="text/javascript" language="javascript"><br />
<!-- //<br />
onload = function(){<br />
document.MyForm.MyTextField.focus();<br />
}<br />
function DisplayValue(){<br />
if(document.MyForm.MyTextField.value!==""){<br />
alert("The value entered was \n" + document.MyForm.MyTextField.value);<br />
}<br />
else{<br />
alert("The text field was empty!\nPlease enter your name.");<br />
}<br />
}<br />
// --><br />
</script><br />
</head><br />
<body><br />
<form name="MyForm" action="http://www.wbex.ru/" method="Post" onsubmit="DisplayValue()"><br />
<input type="text" name="MyTextField"/><P>Enter your name</p><br />
<input type="submit" value="Click to Submit"/><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Getting and Setting a Text Object"s value Property==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html> <br />
<head> <br />
<title>Text Object value Property</title> <br />
<script type="text/javascript"> <br />
function upperMe() { <br />
var field = document.forms[0].converter; <br />
var upperCaseVersion = field.value.toUpperCase(); <br />
field.value = upperCaseVersion; <br />
} <br />
</script> <br />
</head> <br />
<body> <br />
<form onsubmit="return false"> <br />
<input type="text" name="converter" value="sample" onchange="upperMe()"> <br />
</form> <br />
</body> <br />
</html></source><br />
<br />
<br />
<br />
== onFocus event handler==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script language="JavaScript" type = "text/javascript"><br />
<!--<br />
function DisplayMsg(NumVal) {<br />
if (NumVal == 1) {<br />
status = "Type your name in the field" ;<br />
}<br />
if (NumVal == 2) {<br />
status = "Type your phone number in the field"<br />
}<br />
}<br />
//--><br />
</script><br />
<title>Keyboard Event</title><br />
</head><br />
<body><br />
<form name="form1"><br />
<b>Name:</b>&nbsp; <input type = "text" name = "text1" onFocus="DisplayMsg(1)" size="20"><P><br />
<b>Phone:</b> &nbsp;<input type = "text" name = "text2" onFocus="DisplayMsg(2)" size="20"></p><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Refresh the TextField box automatically==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>A Simple Page</title><br />
<script language="JavaScript"><br />
<!--<br />
function gettime() {<br />
var date= new Date();<br />
var hr = date.getHours();<br />
var m = date.getMinutes();<br />
var s = date.getSeconds();<br />
if(m < 10)<br />
{<br />
m = "0" + m<br />
}<br />
if(s < 10)<br />
{<br />
s = "0" + s<br />
}<br />
document.clockform.clock.value = hr + ":" + m + ":" + s;<br />
setTimeout("gettime()",100)<br />
}<br />
// --><br />
</script><br />
</head><br />
<body onload="gettime()"><br />
<form name="clockform"><br />
<input type="text" name="clock"><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Resetting a Text Object to Default Value==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html> <br />
<head> <br />
<title>Text Object DefaultValue</title> <br />
<script type="text/javascript"> <br />
function upperMe(field) { <br />
field.value = field.value.toUpperCase(); <br />
} <br />
function resetField(form) { <br />
form.converter.value = form.converter.defaultValue; <br />
} <br />
</script> <br />
</head> <br />
<body> <br />
<form onsubmit="window.focus(); return false"> <br />
Lowercase letters:<br />
<input type="text" id="convert" name="converter" value="sample" onchange="upperMe(this)" /> <br />
<input type="button" id="reset" value="Reset Field" onclick="resetField(this.form)" /> <br />
</form> <br />
</body> <br />
</html></source><br />
<br />
<br />
<br />
== Retrieving Text in form button action==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Retrieving Text</title><br />
<script language="javascript" type="text/javascript"><br />
<!--<br />
function alertText()<br />
{<br />
var text = document.simpleForm.myText.value;<br />
alert(text);<br />
}<br />
//--><br />
</script><br />
</head><br />
<body><br />
<h1>Retrieving Text</h1><br />
<form name="simpleForm"><br />
<input type="text" name="myText" size="20" /><br />
<input type="button" value="Alert Text" onclick="alertText()" /><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Select all text in a TextBox==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Select Text Example</title><br />
<script type="text/javascript"><br />
function selectText() {<br />
var oTextbox1 = document.getElementById("txt1");<br />
oTextbox1.focus();<br />
oTextbox1.select();<br />
}<br />
</script><br />
</head><br />
<body><br />
<input type="text" size="12" id="txt1" value="www.wbex.ru" /><br /><br />
<input type="button" value="Select Text" onclick="selectText()" /><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== TextArea onmouseup action event==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" language="javascript"><br />
<!-- //<br />
function CheckStatus(){<br />
if (document.MyForm.MyTextField.value==""){<br />
alert("First please enter your name");<br />
document.MyForm.MyTextField.focus();<br />
} else{<br />
document.MyForm.ruments.select();<br />
}<br />
}<br />
// --><br />
</script><br />
</head><br />
<body><br />
<table><br />
<form name="MyForm" action="http://www.wbex.ru/" method="Post" onsubmit="DisplayValue()"><br />
<tr><br />
<td><input type="text" name="MyTextField" onblur="ChangeStatus()"/></td><br />
<td>Enter your name</td><br />
</tr><br />
<tr><br />
<td><textarea name="Comments" rows="6" cols="40" onmouseup="CheckStatus()" >Please enter your name first</textarea></td><br />
<td>Enter your comments.</td><br />
</tr><br />
<tr><br />
<td><input type="submit" value="Click to Submit"/></td><br />
<td>&nbsp;</td><br />
</tr><br />
</table><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== TextField onblur action event==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" language="javascript"><br />
<!-- //<br />
function ChangeStatus(){<br />
if (document.MyForm.MyTextField.value!==""){<br />
document.MyForm.ruments.readOnly = false;<br />
document.MyForm.ruments.select();<br />
} else{<br />
document.MyForm.MyTextField.focus();<br />
}<br />
}<br />
// --><br />
</script><br />
</head><br />
<body><br />
<table><br />
<form name="MyForm" action="http://www.wbex.ru/" method="Post" onsubmit="DisplayValue()"><br />
<tr><br />
<td><input type="text" name="MyTextField" onblur="ChangeStatus()"/></td><br />
<td>Enter your name</td><br />
</tr><br />
<tr><br />
<td><textarea name="Comments" rows="6" cols="40" onmouseup="CheckStatus()" >Please enter your name first</textarea></td><br />
<td>Enter your comments.</td><br />
</tr><br />
<tr><br />
<td><input type="submit" value="Click to Submit"/></td><br />
<td>&nbsp;</td><br />
</tr><br />
</table><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== TextField requests focus==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Set Form focus</title><br />
<script type="text/javascript" language="javascript"><br />
<!-- //<br />
function SetFocus(){<br />
document.SimpleForm.FirstInput.focus();<br />
}<br />
function FindMaxAndMin(){<br />
SetFocus();<br />
}<br />
// --><br />
</script><br />
</head><br />
<body onload="SetFocus()"><br />
<form name="SimpleForm"><br />
<table><br />
<tr><br />
<td width="25%" align="right">Enter first number:</td><br />
<td><input name="FirstInput" type="text"></td><br />
</tr><br />
<tr><br />
<td width="25%" align="right">Enter second number:</td><br />
<td><input name="SecondInput" type="text"></td><br />
</tr><br />
<tr><br />
<td width="25%" align="right">Enter third number:</td><br />
<td><input name="ThirdInput" type="text"></td><br />
</tr><br />
<tr><br />
<td width="25%" align="right">&nbsp;</td><br />
<td><button type="Button" onclick="FindMaxAndMin()"><br />
Click to calculate</button></td><br />
</tr><br />
</table><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Text Input Events==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<HTML><br />
<HEAD><br />
<TITLE>Text Input Events</TITLE><br />
</HEAD><br />
<BODY><br />
<SCRIPT><br />
function handler(e){<br />
if (navigator.appName == "Microsoft Internet Explorer"){<br />
e = window.event;<br />
alert("Event Type: " + e.type);<br />
if (e.keyCode) <br />
alert("Keycode: " + String.fromCharCode(e.keyCode));<br />
if (e.altKey) <br />
alert("Alt Key: " + e.altKey);<br />
if (e.ctrlKey) <br />
alert("Ctrl Key: " + e.ctrlKey);<br />
if (e.shiftKey) <br />
alert("Shift Key: " + e.shiftKey);<br />
} else {<br />
alert("Event Type: " + e.type);<br />
if (e.target) <br />
alert("Target: " + Object.prototype.toString.apply(e.target));<br />
if (e.target.name) <br />
alert("Target Name: " + e.target.name);<br />
if (e.which) <br />
alert("Which: " + String.fromCharCode(e.which));<br />
if (e.modifiers) <br />
alert("Modifiers: " + e.modifiers);<br />
}<br />
}<br />
<br />
function startForm(){<br />
//document.theForm.userLname.onblur = handler;<br />
document.theForm.userLname.onchange = handler;<br />
//document.theForm.userLname.onfocus = handler;<br />
document.theForm.userLname.onkeydown = handler;<br />
document.theForm.userLname.onkeypress = handler;<br />
document.theForm.userLname.onkeyup = handler;<br />
}<br />
<br />
</SCRIPT><br />
<FORM name="theForm"><br />
Enter Your First Name:<br />
<INPUT type=text name="userLname"><br />
<INPUT type=button name="theButton" value="START" onClick="startForm();"><br />
</FORM><br />
</BODY><br />
</HTML></source></div>