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.
-
Remove the keypress bind event in form.js
-
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’
-
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;
}
});
});