Arrow Navigation

Cancel Delete Submit
(null)
2181
2282
1901
1921
2581
1981
1881
2421
1701
2461
Next
Add Row

Instructions

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

  1. Give the tabular form a static ID. I called this one arrow-tabular.
  2. Create a new dynamic action:
    Event: Key Down
    Selection Type: jQuery selector
    jQuery Selector: #arrow-tabular input
  3. 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;
        }
    }
    
    
  4. 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.