Auto Change Focus

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

Instructions

This tabular form automatically focuses in the next field when a certain number of characters is reached, and adds a new row once it reaches the last column in the last row - as described here: https://forums.oracle.com/forums/thread.jspa?threadID=2519256

  1. Give the tabular form a static ID. I called this one focus-tabular.
  2. Create a new dynamic action:
    Event: Key Release
    Selection Type: jQuery selector
    jQuery Selector: #focus-tabular input[type="text"]
  3. True Action: Execute JavaScript code
    Code: (the object columns in the code below specifies the lengths for each column)
    
    var el = this.triggeringElement;
    var lastEleName = "f06";
    var lastColArr = wwv_flow[lastEleName];
    
    var columns = {
        "f03" : 4 
      , "f04" : 6
      , "f05" : 3
      , "f06" : 9 
    };
    
    var input = String.fromCharCode(event.which);
    
    
    if(el.value.length >= columns[el.name]
        && (/[a-zA-Z0-9-_ ]/.test(input))) {   
    
        var lastEle = $(lastColArr).size() >= 2 ? $(lastColArr[lastColArr.length-1]) : $(lastColArr);
    
        if ($(el).is(lastEle)) {
            addRow();
        }
    
        
        var baseSelector = '#focus-tabular :input[type="text"]';
            
        var nextElIndex = $(baseSelector).index(el)+1;
        $(baseSelector + ':eq(' + nextElIndex +')').focus();
      
    }
    
    
  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.