Code
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
Traverse the cursor through text box with navigation keys
<script>
$(document).ready(function(){
$('input').keyup(function(e){
if(e.which==39)
$(this).closest('td').next().find('input').focus();
else if(e.which==37)
$(this).closest('td').prev().find('input').focus();
else if(e.which==40)
$(this).closest('tr').next().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();
else if(e.which==38)
$(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input').focus();
});
});
</script>
</head>
<body>
<table>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>
</body>
</html>
Loved this!
ReplyDelete:-)
ReplyDeleteCheers for this. However, I've copied it exactly and while left and right work, when I press Up/ down it moves diagonally to the right.
ReplyDeleteAny ideas?
pefect! thanks!
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThank you SO MUCH for this, you made my day ! Cheers !
ReplyDeleteThanks gr8 work
ReplyDelete