Arrow Key Navigation

[ShadowMage]

Hi all,I've been trying to write a script that will allow arrow key navigation on forms. Here is my code:

function init() {	var objForm = document.getElementById("TestForm");		document.getElementById("SelectOne").onkeypress = function(e) { navigateTable(getKey(e), this); };	document.getElementById("SelectTwo").onkeypress = function(e) { navigateTable(getKey(e), this); };	document.getElementById("SelectThree").onkeypress = function(e) { navigateTable(getKey(e), this); };		document.getElementById("TxtOneA").onkeypress = function(e) { navigateTable(getKey(e), this); };	//document.getElementById("TxtOneA").onkeypress = function(e) { alert(getKey(e)); }	document.getElementById("TxtTwoA").onkeypress = function(e) { navigateTable(getKey(e), this); };	document.getElementById("TxtThreeA").onkeypress = function(e) { navigateTable(getKey(e), this); };	document.getElementById("TxtOneB").onkeypress = function(e) { navigateTable(getKey(e), this); };	//document.getElementById("TxtTwoB").onkeypress = function(e) { navigateTable(getKey(e), this); };	document.getElementById("TxtThreeB").onkeypress = function(e) { navigateTable(getKey(e), this); };}function navigateTable(key, element) {	//This function accepts a key code and navigates a tables input/select elements based on which arrow key was pressed	//IMPORTANT** - This function only works when elements are arranged in a table	var navTable = getParent("table", element);	var currCell = getParent("td", element);	var tmpRowIndex;	var tmpCellIndex;	var tmpCell;	var arrChild;	var blnMoved = false;		/*e = e || window.event;	var key = e.keyCode || e.which;*/		switch (key) {		case 37: //left arrow			tmpCellIndex = currCell.cellIndex;			tmpRowIndex = getRowIndexOfCell(currCell);						if (tmpCellIndex != 0) {				for (index=(tmpCellIndex-1); index>=0; index--) {					tmpCell = navTable.rows[tmpRowIndex].cells[index];					arrChild = tmpCell.childNodes;					for (x=0; x<arrChild.length; x++) {						if ((arrChild[x].nodeName.toLowerCase() == 'input') || (arrChild[x].nodeName.toLowerCase() == 'select')) {							if (arrChild[x].type.toLowerCase() != 'hidden') {								if ((arrChild[x].type.toLowerCase() == 'text') || (arrChild[x].type.toLowerCase() == 'password')) {									arrChild[x].select();								} else {									arrChild[x].focus();								}								blnMoved = true;								break;							}						}					}					if (blnMoved) {						break;					}				}			}			if (element.nodeName.toLowerCase() == 'select') {				if (element.selectedIndex != 0) {					element.selectedIndex++;				}			}			break;		case 38: //up arrow			tmpCellIndex = currCell.cellIndex;			tmpRowIndex = getRowIndexOfCell(currCell);						if (tmpRowIndex != 0) {				for (index=(tmpRowIndex-1); index>=0; index--) {					if (navTable.rows[index].cells[tmpCellIndex]) {						tmpCell = navTable.rows[index].cells[tmpCellIndex];						arrChild = tmpCell.childNodes;						for (x=0; x<arrChild.length; x++) {							if ((arrChild[x].nodeName.toLowerCase() == 'input') || (arrChild[x].nodeName.toLowerCase() == 'select')) {								if (arrChild[x].type.toLowerCase() != 'hidden') {									if ((arrChild[x].type.toLowerCase() == 'text') || (arrChild[x].type.toLowerCase() == 'password')) {										arrChild[x].select();									} else {										arrChild[x].focus();									}									blnMoved = true;									break;								}							}						}					}					if (blnMoved) {						break;					}				}			}			if (element.nodeName.toLowerCase() == 'select') {				if (element.selectedIndex != 0) {					element.selectedIndex++;				}			}			break;		case 39: //right arrow			tmpCellIndex = currCell.cellIndex;			tmpRowIndex = getRowIndexOfCell(currCell);						if (tmpCellIndex != (navTable.rows[tmpRowIndex].cells.length-1)) {				for (index=(tmpCellIndex+1); index<navTable.rows[tmpRowIndex].cells.length; index++) {					tmpCell = navTable.rows[tmpRowIndex].cells[index];					arrChild = tmpCell.childNodes;					for (x=0; x<arrChild.length; x++) {						if ((arrChild[x].nodeName.toLowerCase() == 'input') || (arrChild[x].nodeName.toLowerCase() == 'select')) {							if (arrChild[x].type.toLowerCase() != 'hidden') {								if ((arrChild[x].type.toLowerCase() == 'text') || (arrChild[x].type.toLowerCase() == 'password')) {									arrChild[x].select();								} else {									arrChild[x].focus();								}								blnMoved = true;								break;							}						}					}					if (blnMoved) {						break;					}				}			}			if (element.nodeName.toLowerCase() == 'select') {				if (element.selectedIndex != (element.options.length-1)) {					element.selectedIndex--;				}			}			break;		case 40: //down arrow			tmpCellIndex = currCell.cellIndex;			tmpRowIndex = getRowIndexOfCell(currCell);						if (tmpRowIndex != (navTable.rows.length-1)) {				for (index=(tmpRowIndex+1); index<navTable.rows.length; index++) {					if (navTable.rows[index].cells[tmpCellIndex]) {						tmpCell = navTable.rows[index].cells[tmpCellIndex];						arrChild = tmpCell.childNodes;						for (x=0; x<arrChild.length; x++) {							if ((arrChild[x].nodeName.toLowerCase() == 'input') || (arrChild[x].nodeName.toLowerCase() == 'select')) {								if (arrChild[x].type.toLowerCase() != 'hidden') {									if ((arrChild[x].type.toLowerCase() == 'text') || (arrChild[x].type.toLowerCase() == 'password')) {										arrChild[x].select();									} else {										arrChild[x].focus();									}									blnMoved = true;									break;								}							}						}					}					if (blnMoved) {						break;					}				}			}			if (element.nodeName.toLowerCase() == 'select') {				if (element.selectedIndex != (element.options.length-1)) {					element.selectedIndex--;				}			}			break;		default:			break;	}} //End funtion navigateTable(e)function getParent(tagName, objElement) {	var tmpParent = objElement;	//var blnParentFound = false;		while (tmpParent.nodeName.toLowerCase() != tagName.toLowerCase()) {		//alert(tmpParent.nodeName.toLowerCase());		tmpParent = tmpParent.parentNode;				if (tmpParent.nodeName.toLowerCase() == "body") {			break;		}	}		return tmpParent;}function getRowIndexOfCell(objCell) {	var containingRow = objCell.parentNode;		return containingRow.rowIndex;}

Trouble is I went through all this work (foolishly testing only w/FF) and decided to try it in IE (I have IE8)Much to my dismay it doesn't work , so I added an alert to see how IE maps the arrow keys, but...IT DOESN'T!!Anyone know how to get this to work in IE?Thanks in advance,jkloth

[Ingolme]

According to this source: http://www.quirksmode.org/dom/events/index.html

keypress: This event should fire only if a keystroke leads to a character actually being added to an HTML element such as a text input. It should not fire when the user presses keys like the arrow keys which do not result in a character.The event should continue firing as long as the user keeps the key depressed.

• Firefox, Safari 3.0, Opera and Konqueror fire keypress events on any key.

This means that Firefox and the other browsers are actually doing things wrong.You need to use either keydown or keyup if you want to properly capture the arrow keys. Though you'll still have to add a keypress event for Opera if you want to keep firing the event while the key is down.

[ShadowMage]

Wow, that was fast! Thanks, Ingolme, it works like a charm now!