title: How to use Up/Down arrows to navigate textboxes
body: <p>I have the following page:</p>
  
  <pre><code>          &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script type="text/javascript"&gt;
          var current = "";
  
  
          function Tab(e) {
              var evtobj = window.event ? event : e;
              var unicode = evtobj.charCode ? e.charCode : evtobj.keyCode;
  
  
              var targ;
              if (evtobj.target) targ = evtobj.target;
              else if (evtobj.srcElement) targ = evtobj.srcElement;
  
  
              if (unicode == 37) {
                  var elements = document.getElementsByTagName("input");
                  for (var i = 0; i &lt; elements.length; i++) {
                      if (elements[i].tabIndex == targ.tabIndex - 1) {
                          elements[i].focus();
                          return true;
                      }
                  }
              }
              else if (unicode == 39) {
                  var elements = document.getElementsByTagName("input");
                  for (var i = 0; i &lt; elements.length; i++) {
                      if (elements[i].tabIndex == targ.tabIndex + 1) {
                          elements[i].focus();
                          return true;
                      }
                  }
              }
              else {
                  return true;
              }
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onkeydown="return Tab(event);"&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;asp:TextBox ID="TextBox1" TabIndex="1" runat="server"&gt;&lt;/asp:TextBox&gt;
      &lt;asp:TextBox ID="TextBox2" TabIndex="2" runat="server"&gt;&lt;/asp:TextBox&gt;
      &lt;asp:TextBox ID="TextBox3" TabIndex="3" runat="server"&gt;&lt;/asp:TextBox&gt;
      &lt;asp:TextBox ID="TextBox4" TabIndex="4" runat="server"&gt;&lt;/asp:TextBox&gt;
      &lt;asp:TextBox ID="TextBox5" TabIndex="5" runat="server"&gt;&lt;/asp:TextBox&gt;
      &lt;asp:Button ID="Button1" runat="server" Text="Button" /&gt;
  
          &lt;br /&gt;
      &lt;asp:TextBox ID="TextBox6" TabIndex="6" runat="server"&gt;&lt;/asp:TextBox&gt;
      &lt;asp:TextBox ID="TextBox7" TabIndex="7" runat="server"&gt;&lt;/asp:TextBox&gt;
      &lt;asp:TextBox ID="TextBox8" TabIndex="8" runat="server"&gt;&lt;/asp:TextBox&gt;
      &lt;asp:TextBox ID="TextBox9" TabIndex="9" runat="server"&gt;&lt;/asp:TextBox&gt;
      &lt;asp:TextBox ID="TextBox10" TabIndex="10" runat="server"&gt;&lt;/asp:TextBox&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>It works fine with Right/Left arrows navigation depending on the tab index for each textbox, I need to do the same with the Up/Down arrows, to navigate up and down by setting focus on the textbox above or under the current text box, for example, if focus is on textbox 3 and I press down arrow the focus should move to textbox 8 as it's under it, and vis versa.</p>