ShadowMage Posted December 9, 2009 Share Posted December 9, 2009 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 Link to comment Share on other sites More sharing options...
Ingolme Posted December 9, 2009 Share Posted December 9, 2009 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. Link to comment Share on other sites More sharing options...
ShadowMage Posted December 9, 2009 Author Share Posted December 9, 2009 Wow, that was fast! Thanks, Ingolme, it works like a charm now! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.