345

ASP.NET jQuery 食谱2 (表单中使用回车在TextBo

系统 1847 0

每次当用户在一个文本框输入完数据后,更希望在敲入回车键后,焦点会自动移动到下一个文本框。

通过下面的代码可以实现这种切换的效果。

首先我们来看界面:

ASP.NET jQuery 食谱2 (表单中使用回车在TextBox之间向下移动)_第1张图片

界面代码:

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>



ASP.NET jQuery 食谱2 (表单中使用回车在TextBox之间向下移动)


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论