JavaScript Tutorial/Form/Text TextField

Материал из Web эксперт
Перейти к: навигация, поиск

Capture key event in a textfield

<html>
<head>
<script language="JavaScript" type = "text/javascript">
<!--
document.onkeypress = DisplayMsg;
function DisplayMsg(key_event)
{
    if (document.all) //Checks for IE 4.0 or later
    {
      document.form1.text2.value = String.fromCharCode(event.keyCode);
    }
    else if (document.getElementById) //checks for Netscape 6 or later
    {
      document.form1.text2.value = String.fromCharCode(key_event.which);
    }
    else if (document.layers) //Checks for Netscape 4
    {
      document.form1.text2.value = String.fromCharCode(key_event.which);
    }
}
//-->
</script>
<title>Capture Key Pressed</title>
</head>
<body>
<form name="form1">
<b>Type value in field:&nbsp; See what you typed:</b><br>
<input type = "text" name = "text1" onKeyPress="DisplayMsg(event)" size="20">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type = "text" name = "text2" onKeyPress="DisplayMsg(event)" size="20">
</form>
</body>
</html>


Compare the value in TextField

<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>


Displaying the value entered in a text field

<html>
<head>
<title>Displaying the value entered in a text field</title>
<script type="text/javascript" language="javascript">
<!-- //
onload = function(){
    document.MyForm.MyTextField.focus();
}
function DisplayValue(){
    if(document.MyForm.MyTextField.value!==""){
        alert("The value entered was \n" + document.MyForm.MyTextField.value);
    }
    else{
        alert("The text field was empty!\nPlease enter your name.");
    }
}
// -->
</script>
</head>
<body>
<form name="MyForm" action="http://www.wbex.ru/" method="Post" onsubmit="DisplayValue()">
<input type="text" name="MyTextField"/><P>Enter your name</p>
<input type="submit" value="Click to Submit"/>
</form>
</body>
</html>


Getting and Setting a Text Object"s value Property

<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>


onFocus event handler

<html>
<head>
<script language="JavaScript" type = "text/javascript">
<!--
function DisplayMsg(NumVal) {
    if (NumVal == 1) {
       status = "Type your name in the field" ;
    }
    if (NumVal == 2) {
       status = "Type your phone number in the field"
    }
}
//-->
</script>
<title>Keyboard Event</title>
</head>
<body>
<form name="form1">
<b>Name:</b>&nbsp; <input type = "text" name = "text1" onFocus="DisplayMsg(1)" size="20"><P>
<b>Phone:</b> &nbsp;<input type = "text" name = "text2" onFocus="DisplayMsg(2)" size="20"></p>
</form>
</body>
</html>


Refresh the TextField box automatically

<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
<!--
function gettime() {
    var date= new Date();
    var hr = date.getHours();
    var m = date.getMinutes();
    var s = date.getSeconds();
    if(m < 10)
    {
        m = "0" + m
    }
    if(s < 10)
    {
        s = "0" + s
    }
    document.clockform.clock.value = hr + ":" + m + ":" + s;
    setTimeout("gettime()",100)
}
//  -->
</script>
</head>
<body onload="gettime()">
<form name="clockform">
<input type="text" name="clock">
</form>
</body>
</html>


Resetting a Text Object to Default Value

<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>


Retrieving Text in form button action

<html>
<head>
<title>Retrieving Text</title>
<script language="javascript" type="text/javascript">
<!--
function alertText()
{
     var text = document.simpleForm.myText.value;
     alert(text);
}
//-->
</script>
</head>
<body>
<h1>Retrieving Text</h1>
<form name="simpleForm">
  <input type="text" name="myText" size="20" />
  <input type="button" value="Alert Text" onclick="alertText()" />
</form>
</body>
</html>


Select all text in a TextBox

<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" /><br />
<input type="button" value="Select Text" onclick="selectText()" />
</body>
</html>


TextArea onmouseup action event

<html>
<head>
<script type="text/javascript" language="javascript">
<!-- //
function CheckStatus(){
    if (document.MyForm.MyTextField.value==""){
        alert("First please enter your name");
        document.MyForm.MyTextField.focus();
    } else{
        document.MyForm.ruments.select();
    }
}
// -->
</script>
</head>
<body>
<table>
<form name="MyForm" action="http://www.wbex.ru/" method="Post" onsubmit="DisplayValue()">
<tr>
 <td><input type="text" name="MyTextField" onblur="ChangeStatus()"/></td>
 <td>Enter your name</td>
</tr>
<tr>
 <td><textarea name="Comments" rows="6" cols="40" onmouseup="CheckStatus()" >Please enter your name first</textarea></td>
 <td>Enter your comments.</td>
</tr>
<tr>
 <td><input type="submit" value="Click to Submit"/></td>
 <td>&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>


TextField onblur action event

<html>
<head>
<script type="text/javascript" language="javascript">
<!-- //
function ChangeStatus(){
    if (document.MyForm.MyTextField.value!==""){
        document.MyForm.ruments.readOnly = false;
        document.MyForm.ruments.select();
    } else{
        document.MyForm.MyTextField.focus();
    }
}
// -->
</script>
</head>
<body>
<table>
<form name="MyForm" action="http://www.wbex.ru/" method="Post" onsubmit="DisplayValue()">
<tr>
 <td><input type="text" name="MyTextField" onblur="ChangeStatus()"/></td>
 <td>Enter your name</td>
</tr>
<tr>
 <td><textarea name="Comments" rows="6" cols="40" onmouseup="CheckStatus()" >Please enter your name first</textarea></td>
 <td>Enter your comments.</td>
</tr>
<tr>
 <td><input type="submit" value="Click to Submit"/></td>
 <td>&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>


TextField requests focus

<html>
<head>
<title>Set Form focus</title>
<script type="text/javascript" language="javascript">
<!-- //
function SetFocus(){
    document.SimpleForm.FirstInput.focus();
}
function FindMaxAndMin(){
        SetFocus();
}
// -->
</script>
</head>
<body onload="SetFocus()">
<form name="SimpleForm">
<table>
<tr>
 <td width="25%" align="right">Enter first number:</td>
 <td><input name="FirstInput" type="text"></td>
</tr>
<tr>
 <td width="25%" align="right">Enter second number:</td>
 <td><input name="SecondInput" type="text"></td>
</tr>
<tr>
 <td width="25%" align="right">Enter third number:</td>
 <td><input name="ThirdInput" type="text"></td>
</tr>
<tr>
 <td width="25%" align="right">&nbsp;</td>
 <td><button type="Button" onclick="FindMaxAndMin()">
Click to calculate</button></td>
</tr>
</table>
</form>
</body>
</html>


Text Input Events

<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>
Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Form/Text_TextField&oldid=9135»