Oracle APEX | How to move between Rows/Columns By [up/down/right/left/enter/delete] keys on tabular form ?
Its Easy,
Now i updated code to using keyboard keys:
Up / Down
Left / Right
Enter
Delete
Just copy next code and follow a PICs
// key events
function keyevent(pThis, e) {
//onkeyup="keyevent(this, event);"
var charCode;
var id_this = pThis.id;
var id_subs = pThis.id.substr(4);
//Get key code (support for all browsers)
if (e && e.which) {
charCode = e.which;
} else if (window.event) {
e = window.event;
charCode = e.keyCode;
}
var keynum;
var current = document.getElementsByName(pThis.name);
if (window.event) // IE
{
keynum = e.keyCode;
} else if (e.which) // Netscape/Firefox/Opera
{
keynum = e.which;
}
// Up/Down Keys to move between rows.
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();
}
}
}
}
// Right/Left keys to move between columns.
//(DEPEND ON THEME DIRECTION "LTR" OR "RTL")
var checkDir = $('html, body').attr('dir');
if (charCode == 39) {
//Checking Direction Theme
if (checkDir=="rtl"){
$('#' + id_this).closest('td').prev().find('input').focus();
} else{
$('#' + id_this).closest('td').next().find('input').focus();
}
}else if (charCode == 37) {
//Checking Direction Theme
if (checkDir=="rtl"){
$('#' + id_this).closest('td').next().find('input').focus();
} else {
$('#' + id_this).closest('td').prev().find('input').focus();
}
}
// Delete Key.
if (charCode == 46) {
var row_id = pThis.id.substr(4);
if ($('#f01_' + row_id).val() == 0) {
$('#f01_' + row_id).closest("tr").remove();
}
//focus at last row
var nm = pThis.name;
//$('[name=f03]:last').focus();
$('[name=' + nm + ']:last').focus();
}
// Enter Key.
if (charCode == 13) {
apex.widget.tabular.addRow();
//focus at last row
var nm = pThis.name;
$('[name=' + nm + ']:last').focus();
}
}
onkeyup="keyevent(this, event);"
Now Save & Check 🙂
Regards,
Amr Abdeen

