Wednesday, December 17, 2008

Moving through tabular forms using the Up/Down arrow keys

Today there was a question on the Oracle APEX forum about How to Navigate through the rows of Report using up or down key. This question pop ups now and then and I decided to figure out how to do this. The solution is quite straight forward:

Set the Element Attributes of the columns of the tabular form to :
onkeyup="moveUpDown(this, event)"
and create a that function in the HTML Header:

function moveUpDown(pThis, pEvent){
var keynum;
var current = document.getElementsByName( pThis.name );
if(window.event) // IE
{ keynum = pEvent.keyCode; }
else if(pEvent.which) // Netscape/Firefox/Opera
{ keynum = pEvent.which; }
if (keynum == 40 || keynum == 38) // Key-Up or Key-Down
{ for (i=0;i < current.length;i++)
{ if ( current[i].id == pThis.id ) // This is current row
{ if (keynum == 40) // Move down
{ current[Math.min(current.length - 1,i+1)].focus(); }
else // Move up
{ current[Math.max(0,i-1)].focus(); }
}
}
}
}
Check out the live example.
PS: Changed the code a little on Dec 18 to prevent javascript errors when pressing Up on the first row and pressing Down on the last row.
Post a Comment