JavaScript DHTML/Form Control/Focus Tab

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

Call blur method from text field

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



Controlling the tab Index Property

 

/*
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>
<H1>tabIndex Property Lab</H1>
<HR>
<FORM NAME="lab">
Text box no. 1: <INPUT TYPE="text" NAME="text1"><BR>
Text box no. 2: <INPUT TYPE="text" NAME="text2"><BR>
<INPUT TYPE="button" VALUE="A Button"><BR>
<INPUT TYPE="checkbox">And a checkbox
</FORM>
<HR>
<FORM NAME="control">
<INPUT TYPE="button" VALUE="Invert Tabbing Order" TABINDEX=-1 onClick="invert()"><BR>
<INPUT TYPE="button" VALUE="Skip Text box no. 2 (IE Only)" TABINDEX=-1 
onClick="skip2()"><BR>
<INPUT TYPE="button" VALUE="Reset to Normal Order" TABINDEX=-1 onClick="resetTab()">
</FORM>
</BODY>
</HTML>



Focus lost event

  
<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" /><br />
    <input type="password" name="text2" /><br />
    <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>



Focus Next Control

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



Request focus for text field

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