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();
    }

}

Screenshot 1 Screenshot 2

 

onkeyup="keyevent(this, event);"

 

 

Now Save & Check 🙂

 

 

Regards,

Amr Abdeen

You may also like...