input nav

by de Montalembert Jonathan

HTML

<table>
 <tbody>
<tr>
  <td><input size="10" type="text"></td>
  <td><input size="10" type="text"></td>
  <td><input size="10" type="text"></td>
  <td><input size="10" type="text"></td>

 </tr>
<tr>
  <td><input size="10" type="text"></td>
  <td><input size="10" type="text"></td>
  <td><input size="10" type="text"></td>
  <td><input size="10" type="text"></td>

 </tr>
     <tr>
  <td><input size="10" type="text"></td>
  <td><input size="10" type="text"></td>
  <td><input size="10" type="text"></td>
  <td><input size="10" type="text"></td>

 </tr>
     <tr>
  <td><input size="10" type="text"></td>
  <td><input size="10" type="text"></td>
  <td><input size="10" type="text"></td>
  <td><input size="10" type="text"></td>

 </tr>
</tbody></table>

JavaScript

$(document).ready(function() {
    var master = false,
        CTRL = 17,
        LEFT = 37,
        RIGHT = 39,
        UP = 38,
        DOWN = 40;

    $('input').keydown(function(e) {

        if (e.which == CTRL) {
            master = true;
        }

        if (master) {
            if (e.which == RIGHT) {
                $(this).closest('td').next().find('input').focus();
            }
            else if (e.which == LEFT) {
                $(this).closest('td').prev().find('input').focus();
            }
            else if (e.which == DOWN) {
                $(this).closest('tr').next().find('td').eq($(this).closest('td').index()).find('input').focus();
            }
            else if (e.which == UP) {
                $(this).closest('tr').prev().find('td').eq($(this).closest('td').index()).find('input').focus();
            }

        }

    }).keyup(function(e) {
        if (e.which == CTRL) {
            master = false;
        }
    });


});