Tab ao teclar ENTER ASP.net JQuery

Ao inserir  dados em um formulário web extenso, os usuários preferem utilizar a tecla ENTER ao invés da tecla TAB para ir para o próximo campo. Veremos aqui como conseguir este efeito com JQuery.

1. Adicione um novo formulário em sua WebApplication ou  em seu Website;
2. Adicione alguns controles Textbox para simularmos um cadastro de usuário, conforme abaixo:

    <form id="form1" runat="server">
       <div align="center">
         <fieldset style="width:400px;height:200px;">
          <table cellpadding="3" cellspacing="3" border="0">
            <tr><td>
                  <asp:Label ID="lblName" Text="Name: " runat="server"></
                  asp:Label></td>
                  <td><asp:TextBox ID="txtName" Width="200px" runat="server"></
                   asp:TextBox></td></tr>
                  <tr><td><asp:Label ID="lblAddress" Text="Address: "
                   runat="server"></asp:Label></td>
                  <td><asp:TextBox ID="txtAddress" Width="200px"
                  runat="server"></asp:TextBox></td></tr>
                  <tr><td><asp:Label ID="lblContact" Text="Contact Number: "
                   runat="server"></asp:Label></td>
                  <td><asp:TextBox ID="txtContact" Width="200px"
                  runat="server"></asp:TextBox></td></tr>
                  <tr><td><asp:Label ID="lblEmail" Text="Email: "
                  runat="server"></asp:Label></td>
                  <td><asp:TextBox ID="txtEmail" Width="200px" runat="server"></
                  asp:TextBox></td></tr>
                  <tr><td></td><td><asp:Button ID="btnSubmit" Text="SUBMIT"
                 runat="server" />
                <asp:Button ID="btnReset" Text="RESET" runat="server" />
                </td></tr>
         </table>
       </fieldset>
      </div>
    </form>

Vamos ao JQuery

1.  Na função document.ready() do JQuery, insira o seguinte seletor $('input:text:first'), este seletor vai recuperar o primeiro elemento do tipo 'text' do seu form;
2. Coloque $('input:text:first').focus(), para setar o focu no primeiro textbox do seu form;
3. Use o bind para registrar o handler do evento "keydown" em todos os textboxes do form: $('input:text').bind("keydown", function(e) {
4. Verifique se a tecla ENTER foi pressionada: if (e.which == 13) {
5. Se o ENTER foi pressionado previne o evento padrão, que seria o submit do form:  e.preventDefault();
6. Incremente o índice do textbox corrente e recupere o índice do próximo textbox: var nextIndex = $('input:text').index(this) + 1;
7. Coloque o focu no próximo textbox:  $('input:text')[nextIndex].focus();
   }
   });
8. Adicione a função do evento click do botão para limpar o formulário:                     $('#btnReset').click(
   function() {
   $('form')[0].reset();
   });
9. Código JQuery completo                                                                                                                     <script type="text/javascript">
      $(document).ready(function() {
              $('input:text:first').focus();
              $('input:text').bind("keydown", function(e) {
              if (e.which == 13) { //tecla enter keycode =13
                   e.preventDefault(); //nao executa evento padrao
                   var nextIndex = $('input:text').index(this) + 1;
                   $('input:text')[nextIndex].focus();
              }
            });
        $('#btnReset').click(
        function() {
              $('form')[0].reset();
      });
   });
   </script>

Referências :

• ASP.NET JQuery CookBook
• www.jquery.com