I learned something pretty cool last week. I fielded a request from a client who wanted to be able to use the up and down arrows on his keyboard to navigate a rather large form on the site I created for him. I believed it was possible but I had never done it. So after doing some research I figured out how to do it. Below is a simplistic version (put your cursor in one of the text boxes below and push the up or down arrow keys to move between them):

1-1		1-2		1-3
2-1		2-2		2-3
3-1		3-2		3-3

The HTML for the simple table is as follows:

<table border="1">
<tr>
<td>1-1</td>
<td><input id="ItemCost11" onkeydown="return checkKey(event,3,3,'ItemCost',1,1)" maxlength="30" name="ItemCost11" size="3" /></td>
<td>1-2</td>
<td><input id="ItemCost12" onkeydown="return checkKey(event,3,3,'ItemCost',1,2)" maxlength="30" name="ItemCost12" size="3" /></td>
<td>1-3</td>
<td><input id="ItemCost13" onkeydown="return checkKey(event,3,3,'ItemCost',1,3)" maxlength="30" name="ItemCost13" size="3" /></td>
</tr>
<tr>
<td>2-1</td>
<td><input id="ItemCost21" onkeydown="return checkKey(event,3,3,'ItemCost',2,1)" maxlength="30" name="ItemCost21" size="3" /></td>
<td>2-2</td>
<td><input id="ItemCost22" onkeydown="return checkKey(event,3,3,'ItemCost',2,2)" maxlength="30" name="ItemCost22" size="3" /></td>
<td>2-3</td>
<td><input id="ItemCost23" onkeydown="return checkKey(event,3,3,'ItemCost',2,3)" maxlength="30" name="ItemCost23" size="3" /></td>
</tr>
<tr>
<td>3-1</td>
<td><input id="ItemCost31" onkeydown="return checkKey(event,3,3,'ItemCost',3,1)" maxlength="30" name="ItemCost31" size="3" /></td>
<td>3-2</td>
<td><input id="ItemCost32" onkeydown="return checkKey(event,3,3,'ItemCost',3,2)" maxlength="30" name="ItemCost32" size="3" /></td>
<td>3-3</td>
<td><input id="ItemCost33" onkeydown="return checkKey(event,3,3,'ItemCost',3,3)" maxlength="30" name="ItemCost33" size="3" /></td>
</tr>
</table>

The javascript function used is as follows:

<script type="text/javascript"><!--
function checkKey(event, numRecs, numCols, myName, myRow, myCol) {
      var key = event.keyCode;
      var bSetFocus = false;
      var myId = '';
// if the left arrow has been pressed and we're not in the first column
      if( key == 37) {
            if (myCol-1 > 0) {
                  myId =  myName + myRow + (myCol-1);
                  bSetFocus = true;
            }
      }
      // if the up arrow has been pressed and we're not in the first row
      if( key == 38) {
            if (myRow-1 > 0) {
                  myId =  myName + (myRow-1) + myCol;
                  bSetFocus = true;
            }
      }
      // if the right arrow has been pressed and we're not in the last column
      if( key == 39) {
            if (myCol+1 <= numRecs) {
                  myId =  myName + myRow + (myCol+1);
                  bSetFocus = true;
            }
      }
      // if the down arrow has been pressed and we're not in the last row
      else if( key == 40 ) {
            if (myRow+1 <= numCols) {
                  myId =  myName + (myRow+1) + myCol;
                  bSetFocus = true;
            }
      }
      if (bSetFocus) document.getElementById(myId).focus();
} // end checkKey function
// --></script>

In my code I generate the HTML using PHP so when I pass the number of records to the checkKey function (3 in this example) it is the number of rows returned from a database query, and the current row for any given row of the table is the counter in a loop I use to print the table.

By the way, if you want to allow for the left and right arrows to move left and right in a form, you can do that by expanding the checkKey function to look for key code 37 (left arrow) and key code 39 (right arrow), and you’ll need to implement a column ordering scheme (like the counter I used for the rows) so you’ll know where to take the cursor.

Four Direction Code
(submitted by Mr Arrows below, but the comment fields do not accept code so I put it in the main post. I actually had trouble putting two working code samples in the same post so I just updated the main example above to include the left and right arrows)

Related posts:

1. The Essence of AJAX - How I learned it in an hourI was a bit resistant to learning ajax for a...

Tags: Javascript

This entry was posted on Sunday, October 5th, 2008 at 6:50 pm and is filed under Code. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.