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