ASP.NET jQuery 食谱2 (表单中使用回车在TextBox之间向下移动)
每次当用户在一个文本框输入完数据后，更希望在敲入回车键后，焦点会自动移动到下一个文本框。
通过下面的代码可以实现这种切换的效果。
首先我们来看界面：
界面代码：
View Code
1 <body>
2 <form id="form1" runat="server">
3 <div align="center">
4 <fieldset style="width: 400px; height: 200px;">
5 <table cellpadding="3" cellspacing="3" border="0">
6 <tr>
7 <td>
8 <asp:Label ID="lblName" Text="姓名: " runat="server"></asp:Label>
9 </td>
10 <td>
11 <asp:TextBox ID="txtName" Width="200px" runat="server"></asp:TextBox>
12 </td>
13 </tr>
14 <tr>
15 <td>
16 <asp:Label ID="lblAddress" Text="地址: " runat="server"></asp:Label>
17 </td>
18 <td>
19 <asp:TextBox ID="txtAddress" Width="200px" runat="server"></asp:TextBox>
20 </td>
21 </tr>
22 <tr>
23 <td>
24 <asp:Label ID="lblContact" Text="联系电话: " runat="server"></asp:Label>
25 </td>
26 <td>
27 <asp:TextBox ID="txtContact" Width="200px" runat="server"></asp:TextBox>
28 </td>
29 </tr>
30 <tr>
31 <td>
32 <asp:Label ID="lblEmail" Text="电子邮箱: " runat="server"></asp:Label>
33 </td>
34 <td>
35 <asp:TextBox ID="txtEmail" Width="200px" runat="server"></asp:TextBox>
36 </td>
37 </tr>
38 <tr>
39 <td>
40 </td>
41 <td>
42 <asp:Button ID="btnSubmit" Text="提交" runat="server" />
43 <asp:Button ID="btnReset" Text="重置" runat="server" />
44 </td>
45 </tr>
46 </table>
47 </fieldset>
48 </div>
49 </form>
50 </body>
脚本代码：
1 <head runat="server">
2 <title>Recipe2</title>
3 <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
4 <script type="text/javascript">
5 $(document).ready(function () {
6 $("input:text:first").focus(); // TextBox转换成html控件为<input type="text"/>
7 $("input:text").bind("keydown", function (e) {
8 if (e.which == 13) { // 获取Enter键值
9 e.preventDefault(); // 阻止表单按Enter键默认行为，防止按回车键提交表单
10 var nextIndex = $("input:text").index(this) + 1;
11 $("input:text")[nextIndex].focus();
12 }
13 });
14
15 $("#<%=btnReset.ClientID%>").click(function () {
16 $("form")[0].reset();
17 });
18 });
19 </script>
20 </head>
