JavaScript Tutorial/Form/Text TextField

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

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>

<form name="MyForm" action="http://www.wbex.ru/" method="Post" onsubmit="DisplayValue()">
<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>

<form name="MyForm" action="http://www.wbex.ru/" method="Post" onsubmit="DisplayValue()">
<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>

Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Form/Text_TextField&oldid=9135»