Data entry form navigated in 4 directions using arrow keys

Support - Assistance technique
1

Many users requested to be able to do 4 ways navigation in entry form.

I made the following change to enable that feature. I’d like to share it to those who have ever received that kind of request from users.

  1. Remove the keypress bind event in form.js

  2. Add an attribute (I used mycol) to each text field to group all the inputs that belong to a column. Like this <input name=“entryfield” mycol=‘col$colid’

  3. Add the following js script to the entry form.

It works really fine.

$(document).ready(function() {

$(“.entryfield”).keydown( function (e) {

switch(e.keyCode)

{

// left arrow

case 37:

$(this).parent()

.prev()

.children(“.entryfield”)

.focus();

break;

// right arrow

case 39:

$(this).parent()

.next()

.children(“.entryfield”)

.focus();

break;

// up arrow + as attr name is already used, I defined mycol to mark the cells that belong to 1 column

case 40:

$(this).parent()

.parent()

.next()

.children(“td”)

.children(“.entryfield[mycol=”+$(this).attr(“mycol”)+“]”)

.focus();

break;

// down arrow

case 38:

$(this).parent()

.parent()

.prev()

.children(“td”)

.children(“.entryfield[mycol=”+$(this).attr(“mycol”)+“]”)

.focus();

break;

}

});

});