ASP.NET jQuery (表單中使用回車在TextBox之間向下移動)

注:(原始鏈接:http://www.cnblogs.com/iamlixin/archive/2012/01/08/2316682.html)本文只做收藏,方便以後學習使用;

每次當用戶在一個文本框輸入完數據後,更希望在敲入回車鍵後,焦點會自動移動到下一個文本框。

通過下面的代碼可以實現這種切換的效果。

 

View Code 
 <body>
     <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="姓名: " 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="地址: " 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="聯繫電話: " 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="電子郵箱: " 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="提交" runat="server" />
                         <asp:Button ID="btnReset" Text="重置" runat="server" />
                     </td>
                 </tr>
             </table>
         </fieldset>
     </div>
     </form>
 </body>

 

 

<head runat="server">
     <title>Recipe2</title>
     <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             $("input:text:first").focus(); // TextBox轉換成html控件爲<input type="text"/>
             $("input:text").bind("keydown", function (e) {
                 if (e.which == 13) { // 獲取Enter鍵值
                     e.preventDefault(); // 阻止表單按Enter鍵默認行爲,防止按回車鍵提交表單
                     var nextIndex = $("input:text").index(this) + 1;
                     $("input:text")[nextIndex].focus();
                 }
             });
 
             $("#<%=btnReset.ClientID%>").click(function () {
                 $("form")[0].reset();
             });
         });
     </script>
 </head>

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章