Link to home
Start Free TrialLog in
Avatar of frankmorrison
frankmorrison

asked on

Capture "Up Arrow" or "Down Arrow" to go to the previous or the next TabIndex

On the sample page below, I need a javascript function that will allow the user to change the focus to the previous or next tabindex using the "Up-arrow" or "Down-arrow" keys respectively.  

I need a smart javascript function that will work with various forms on the same page. Any ideas?

============ sample code ===============
<html>
<head>
</head>

<body>
<form name="myform1">
  <table>
    <tr>
      <td>
            Form #1</td>
    </tr>
    <tr>
      <td>
            <input type="text" name="Text" size="20" tabindex="1"></td>
    </tr>
    <tr>
      <td><input type="radio" value="A" name="OptionButton" tabindex="2">A or B<input type="radio" value="B" checked name="OptionButton" tabindex="3"></td>
    </tr>
    <tr>
      <td><select size="1" name="DropDown" tabindex="4">
            <option selected value="1">Choice 1</option>
            <option value="2">Choice 2</option>
            <option value="3">Choice 3</option>
            </select></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="CheckBox" value="T" tabindex="5">True</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
<br>
<form name="myform2">
  <table>
    <tr>
      <td>
            Form #2</td>
    </tr>
    <tr>
      <td>
            <input type="text" name="Text" size="20" tabindex="6"></td>
    </tr>
    <tr>
      <td><input type="radio" value="A" name="OptionButton" tabindex="7">A or B<input type="radio" value="B" checked name="OptionButton" tabindex="8"></td>
    </tr>
    <tr>
      <td><select size="1" name="DropDown" tabindex="9">
            <option selected value="1">Choice 1</option>
            <option value="2">Choice 2</option>
            <option value="3">Choice 3</option>
            </select></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="CheckBox" value="T" tabindex="10">True</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
</body>
</html>
============ end of sample code ===============
Avatar of ljo8877
ljo8877

This should get you in the direction you want. Add unique ids to each input tag (I don't know what would happen if you used names which aren't unique).

Add the event handler -- either onkeydown or onkeyup, but not onkeypress -- to the form

<form name="myform1" onkeydown="checkArrow(event);">

In the head or your script file define the event handler keycode 38 is uparrow and 40 is downarrow.

<script type="text/javascript">
function checkArrow(evt) {

      if (!evt) evt = window.event; //if not others then IE
      var keycode = evt.keyCode;

      if (keycode == 38 || keycode == 40) { //Do stuff only if arrow key

           /* Find the input field that triggered or contains the element that triggered the event */
          var obj = (typeof evt.target != "undefine") ? evt.target : evt.srcElement;

          while(obj.tagName.toLowerCase() !="input" && obj.tagName.toLowerCase() !="FORM"){
                obj= (typeof obj.parentNode != "undefined") ? obj.parentNode : obj.parentElement;
          }
         
          /* If an input field process */
          if (obj.tagName.toLowerCase() == "input") {

               /* Get current fields id */
               var currentField = (typeof evt.target != "undefined") ? evt.target : evt.srcElement; //other or IE
               var currentId = currentField.id;
               var newID = null;

               /* Determine next field */
                switch (currentID) {
                case: "Text":
                     if (keycode == 40) newID = "OptionButton1";
                     break;
                case: "OptionButton1":
                     if (keycode == 38) newID = "Test";
                     else newID= "OptionButton2";
                     break;
                case: "OptionButton2":
                     if (keycode == 38) newID = "OptionButton1";
                     else newID = "DropDown";
                     break;
                case: "DropDown":
                     if (keycode == 38) newID = "OptionButton2";
                     else newID = "CheckBox";
                     break;
                case: "CheckBox":
                     if (keycode == 38) newID = "DropDown";
                     break;
                }

               /* Move to new field */
               if (newID) document.getElementByID(newID).focus();
     }
}
</script>
Avatar of frankmorrison

ASKER

ljo8877:

I'm getting a syntax error on case: "Text":
What am I doing wrong? Here's the entire code:

=================== sample code by ljo8877 ==================
<html>
<head>

<script type="text/javascript">
function checkArrow(evt) {

      if (!evt) evt = window.event; //if not others then IE
      var keycode = evt.keyCode;

      if (keycode == 38 || keycode == 40) { //Do stuff only if arrow key

           /* Find the input field that triggered or contains the element that triggered the event */
          var obj = (typeof evt.target != "undefine") ? evt.target : evt.srcElement;

          while(obj.tagName.toLowerCase() !="input" && obj.tagName.toLowerCase() !="FORM"){
                obj= (typeof obj.parentNode != "undefined") ? obj.parentNode : obj.parentElement;
          }
         
          /* If an input field process */
          if (obj.tagName.toLowerCase() == "input") {

               /* Get current fields id */
               var currentField = (typeof evt.target != "undefined") ? evt.target : evt.srcElement; //other or IE
               var currentId = currentField.id;
               var newID = null;

               /* Determine next field */
                switch (currentID) {
                case: "Text":
                     if (keycode == 40) newID = "OptionButton1";
                     break;
                case: "OptionButton1":
                     if (keycode == 38) newID = "Test";
                     else newID= "OptionButton2";
                     break;
                case: "OptionButton2":
                     if (keycode == 38) newID = "OptionButton1";
                     else newID = "DropDown";
                     break;
                case: "DropDown":
                     if (keycode == 38) newID = "OptionButton2";
                     else newID = "CheckBox";
                     break;
                case: "CheckBox":
                     if (keycode == 38) newID = "DropDown";
                     break;
                }

               /* Move to new field */
               if (newID) document.getElementByID(newID).focus();
     }
}
</script>
</head>

<body>
<form name="myform1" onkeydown="checkArrow(event);">
  <table>
    <tr>
      <td>
          Form #1</td>
    </tr>
    <tr>
      <td>
          <input type="text" name="Text" size="20" tabindex="1"></td>
    </tr>
    <tr>
      <td><input type="radio" value="A" name="OptionButton" tabindex="2">A or B<input type="radio" value="B" checked name="OptionButton" tabindex="3"></td>
    </tr>
    <tr>
      <td><select size="1" name="DropDown" tabindex="4">
          <option selected value="1">Choice 1</option>
          <option value="2">Choice 2</option>
          <option value="3">Choice 3</option>
          </select></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="CheckBox" value="T" tabindex="5">True</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
<br>
<form name="myform2">
  <table>
    <tr>
      <td>
          Form #2</td>
    </tr>
    <tr>
      <td>
          <input type="text" name="Text" size="20" tabindex="6"></td>
    </tr>
    <tr>
      <td><input type="radio" value="A" name="OptionButton" tabindex="7">A or B<input type="radio" value="B" checked name="OptionButton" tabindex="8"></td>
    </tr>
    <tr>
      <td><select size="1" name="DropDown" tabindex="9">
          <option selected value="1">Choice 1</option>
          <option value="2">Choice 2</option>
          <option value="3">Choice 3</option>
          </select></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="CheckBox" value="T" tabindex="10">True</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
</body>
</html>
============== end of sample code by ljo8877
ASKER CERTIFIED SOLUTION
Avatar of ljo8877
ljo8877

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial