Skip to main content

Use jQuery to traverse the cursor through input text boxes using arrow keys instead of tabs.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
 <body>
  <h1>Traverse the cursor through text box with navigation(arrow) keys</h1>
  <p><a href="http://www.knowlbase.in/2012/01/traverse-cursor-through-text-box-with.html" title="">Source</a></p>

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

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {

      $('input').keyup(function (e) {
        if (e.which == 39) { // right arrow
          $(this).closest('td').next().find('input').focus();

        } else if (e.which == 37) { // left arrow
          $(this).closest('td').prev().find('input').focus();

        } else if (e.which == 40) { // down arrow
          $(this).closest('tr').next().find('td:eq(' + $(this).closest('td').index() + ')').find('input').focus();

        } else if (e.which == 38) { // up arrow
          $(this).closest('tr').prev().find('td:eq(' + $(this).closest('td').index() + ')').find('input').focus();
        }
      });

    // un-comment to display key code
    // $("input").keydown(function (e) {
    //   console.log(e.which);
    // });
    });
  </script>
</body>
</html>