Monday, 12 December 2016

Moving through tabular forms using the Up/Down arrow keys

Create a that function in the HTML Header

<script type="text/javascript">
    var start;
    function load(){
        console.log(document.getElementsByClassName("t-Report-report").length);
    start = document.getElementsByClassName("t-Report-report")[0];
    start.onkeydown = changePosition;
    }

function changePosition(event){
    var currRow = event.target.parentElement.parentElement.rowIndex, currCell = event.target.parentElement.cellIndex;
    switch(event.keyCode){
        case 38 : start.getElementsByTagName("tr")[currRow - 1].getElementsByTagName("td")[currCell].getElementsByTagName("input")[0].focus();
            break;
        case 40 : start.getElementsByTagName("tr")[currRow + 1].getElementsByTagName("td")[currCell].getElementsByTagName("input")[0].focus();
            break;
        case 39 : start.getElementsByTagName("tr")[currRow].getElementsByTagName("td")[currCell + 1].getElementsByTagName("input")[0].focus();
            break;
        case 37 : start.getElementsByTagName("tr")[currRow].getElementsByTagName("td")[currCell - 1].getElementsByTagName("input")[0].focus();
            break;
    }
}
</script>

Page HTML Body Attribute Call Function

onload="load()"

Example:

https://apex.oracle.com/pls/apex/f?p=131188:2:101084693213236::NO:::

2 comments:

  1. Hi,
    Thanks for the code.
    I'm trying to look at the demo, but looks like it's not available anymore

    ReplyDelete