[jQuery] key board navigation for textboxes in the grid
Hi,
I have a gridview which has 200 rows and 9 columns in each cell. All
the columns have text boxes. I have added the keyboard navigation to
the text boxes so that the user can use left, right, up, down arrow
keys to go to the next cell. But it is little bit slow. I just want to
make sure if I am doing this right. If not, what would be right
approach? Please see my code below.
//ready event
$(function(){
$('input[type=text]').not('[id^=outside]').each(function()
{
var current = this;
this.onkeydown = function(event) {
if(!event) event = window.event;
funcKeyDown(event,
this);
}
});
});
function funcKeyDown(evt, obj)
{
var inputSelector = 'input[type=text]';
var inputFilter = '[id=' + obj.id + ']';
var elem = $
(inputSelector).filter(inputFilter);
var index = $(inputSelector).index(elem);
//get the number of elements in each row
var numElements =
elem.parent().parent().children().size();
switch(evt.keyCode) {
case 37: //
left
if(index != -1)
{
var nextElem = $(inputSelector).get(index -
1);
if(nextElem != null)
{
nextElem.focus();
}
}
return false;
case 38: //up
var cellIndex = index % numElements;
var rowIndex = parseInt(index /
numElements);
if(rowIndex > 0)
rowIndex = rowIndex - 1;
var cell = $(inputSelector).get((rowIndex *
numElements) + cellIndex);
if(cell != null)
{
cell.focus();
}
return false;
case 39: //right
if(index != -1)
{
var nextElem = $(inputSelector).get(index +
1);
if(nextElem != null)
{
nextElem.focus();
}
}
return false;
case 40: //down
var cellIndex = index % numElements;
var rowIndex = parseInt(index / numElements) +
1;
var cell = $(inputSelector).get((rowIndex *
numElements) + cellIndex);
if(cell != null)
{
cell.focus();
}
return false;
}
}