This tabular form allows you to navigate through the fields by holding down the control key and using the arrow keys - as described here: https://forums.oracle.com/forums/thread.jspa?threadID=2526996&tstart=0
- Give the tabular form a static ID. I called this one arrow-tabular.
- Create a new dynamic action:
Event: Key Down
Selection Type: jQuery selector
jQuery Selector: #arrow-tabular input
- True Action: Execute JavaScript code
Code:
var baseSelector = '#arrow-tabular input[type!="hidden"]';
if(event.ctrlKey){
event.preventDefault();//i.e. stop scrolling
switch (event.keyCode) {
case 37:
//left
var prevElIndex = $(baseSelector).index(this.triggeringElement)-1;
$(baseSelector + ':eq(' + prevElIndex + ')').focus();
break;
case 38:
//up
var name = this.triggeringElement.name;
var row = $x_UpTill(this.triggeringElement,'TR');
var prevRow = $(row).prev();
$('input[name="' + name + '"]', prevRow).focus();
break;
case 39:
//right
console.log($(baseSelector));
var nextElIndex = $(baseSelector).index(this.triggeringElement)+1;
$(baseSelector + ':eq(' + nextElIndex + ')').focus();
break;
case 40:
//down
var name = this.triggeringElement.name;
var row = $x_UpTill(this.triggeringElement,'TR');
var nextRow = $(row).next();
$('input[name="' + name + '"]', nextRow).focus();
break;
}
}
- It is important to update the dynamic action and specify the Event Scope as Dynamic, so that and additional rows that are added are still affected.