zoukankan      html  css  js  c++  java
  • 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=" 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>
    
  • 相关阅读:
    17.10.13
    17.10.12
    17.10.11
    17.10.10
    17.10.05
    17.10.04
    17.10.03
    17.10.02
    17.10.01
    17.9.29
  • 原文地址:https://www.cnblogs.com/huaku/p/3120451.html
Copyright © 2011-2022 走看看