Posted in Javascript onJanuary 13, 2012
通过下面的代码可以实现这种切换的效果。
首先我们来看界面： 
界面代码：
<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> ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@