JavaScript DHTML/Form Control/Focus Tab

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

Call blur method from text field

   <source lang="html4strict">

<HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript> function butCheckForm_onclick() { 

  var myForm = document.form1;
  myForm.txtAge.blur();
  
  if (myForm.txtAge.value == "" || myForm.txtName.value == "")
  {
     document.write("missing value!");
     if (myForm.txtName.value == "")
     {
        myForm.txtName.focus();
     }
     else
     {
        myForm.txtAge.focus();
     }
  }
  else
  {
     document.write(myForm.txtName.value);
  }

} function txtAge_onblur() { 

  var txtAge = document.form1.txtAge;
  if (isNaN(txtAge.value) == true)
  {
     alert("Age must be a number.");
     txtAge.focus();
     txtAge.select();
  }

} function txtName_onchange() { 

  window.status = "Hi " + document.form1.txtName.value;
  document.write(document.form1.txtName.value);

} </SCRIPT> </HEAD> <BODY> <FORM NAME=form1> Please enter the following details: 

  Name:<INPUT TYPE="text" NAME=txtName onchange="txtName_onchange()">
  Age: <INPUT TYPE="text" NAME=txtAge onblur="txtAge_onblur()">
       <INPUT TYPE="button" VALUE="Check Details" NAME=butCheckForm onclick="butCheckForm_onclick()">

</FORM> </BODY> </HTML> 


 </source>


Controlling the tab Index Property

   <source lang="html4strict">

/* JavaScript Bible, Fourth Edition by Danny Goodman John Wiley & Sons CopyRight 2001

  • /

<HTML> <HEAD> <TITLE>tabIndex Property</TITLE> <SCRIPT LANGUAGE="JavaScript"> function invert() { 

   var form = document.lab
   for (var i = 0, j = form.elements.length; i < form.elements.length;

i++, j--) { 

       form.elements[i].tabIndex = j
   }

} function skip2() { 

   document.lab.text2.tabIndex = -1

} function resetTab() { 

   var form = document.lab
   for (var i = 0; i < form.elements.length; i++) {
       form.elements[i].tabIndex = 0
   }

} </SCRIPT> </HEAD> <BODY>

tabIndex Property Lab

<FORM NAME="lab"> Text box no. 1: <INPUT TYPE="text" NAME="text1">
Text box no. 2: <INPUT TYPE="text" NAME="text2">
<INPUT TYPE="button" VALUE="A Button">
<INPUT TYPE="checkbox">And a checkbox </FORM>

<FORM NAME="control"> <INPUT TYPE="button" VALUE="Invert Tabbing Order" TABINDEX=-1 onClick="invert()">
<INPUT TYPE="button" VALUE="Skip Text box no. 2 (IE Only)" TABINDEX=-1 onClick="skip2()">
<INPUT TYPE="button" VALUE="Reset to Normal Order" TABINDEX=-1 onClick="resetTab()"> </FORM> </BODY> </HTML> 


 </source>


Focus lost event

   <source lang="html4strict">

<html> <head> <title>Required Field</title> <script type="text/javascript"> window.onload=setupEvents; function setupEvents(evnt) { 

  document.someForm.text2.onblur=checkRequired;

} function checkRequired (evnt) { 

 evnt = evnt ? evnt : window.event;
 var target = evnt.target ? evnt.target : evnt.srcElement;
 var txtInput = target.value;
 if (txtInput == null || txtInput == "") {
    document.write("value is required in field");
 }

} </script> </head> <body> <form name="someForm"> 

   <input type="text" name="text1" />

   <input type="password" name="text2" />

   <input type="hidden" name="text3" value="hidden value" />
   <textarea name="text4" cols=50 rows=10>The text area</textarea>
   <input type="submit" value="Submit" />

</form> </body> </html> 


 </source>


Focus Next Control

   <source lang="html4strict">

function focusNext(form, elemName, evt) { 

   evt = (evt) ? evt : event;
   var charCode = (evt.charCode) ? evt.charCode :
       ((evt.which) ? evt.which : evt.keyCode);
   if (charCode == 13) {
       form.elements[elemName].focus();
       return false;
   }
   return true;

} onkeypress="return focusNext(this.form, "name2", event)" 


 </source>


Request focus for text field

   <source lang="html4strict">

<HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript> function butCheckForm_onclick() { 

  var myForm = document.form1;
  myForm.txtAge.blur();
  
  if (myForm.txtAge.value == "" || myForm.txtName.value == "")
  {
     document.write("missing value!");
     if (myForm.txtName.value == "")
     {
        myForm.txtName.focus();
     }
     else
     {
        myForm.txtAge.focus();
     }
  }
  else
  {
     document.write(myForm.txtName.value);
  }

} function txtAge_onblur() { 

  var txtAge = document.form1.txtAge;
  if (isNaN(txtAge.value) == true)
  {
     alert("Age must be a number.");
     txtAge.focus();
     txtAge.select();
  }

} function txtName_onchange() { 

  window.status = "Hi " + document.form1.txtName.value;
  document.write(document.form1.txtName.value);

} </SCRIPT> </HEAD> <BODY> <FORM NAME=form1> Please enter the following details: 

  Name:<INPUT TYPE="text" NAME=txtName onchange="txtName_onchange()">
  Age: <INPUT TYPE="text" NAME=txtAge onblur="txtAge_onblur()">
       <INPUT TYPE="button" VALUE="Check Details" NAME=butCheckForm onclick="butCheckForm_onclick()">

</FORM> </BODY> </HTML> 


 </source>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Form_Control/Focus_Tab&oldid=2521»