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


Posted in Javascript onJanuary 13, 2012

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

首先我们来看界面: ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
界面代码:

<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>
Javascript 相关文章推荐
JavaScript 学习笔记(七)字符串的连接
Dec 31 Javascript
Javascript学习笔记-详解in运算符
Sep 13 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
详解JavaScript中常用的函数类型
Nov 18 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
vue组件学习教程
Sep 09 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 #Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 #Javascript
js中根据字数截取字符串,不能截断url
Jan 12 #Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 #Javascript
js日历功能对象
Jan 12 #Javascript
关于 文本框默认值 的操作js代码
Jan 12 #Javascript
新发现一个骗链接的方法(js读取cookies)
Jan 11 #Javascript
You might like
php图片加中文水印实现代码分享
2012/10/31 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
js实现下一页页码效果
2017/03/07 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
python批量下载图片的三种方法
2013/04/22 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
浅谈Python基础之I/O模型
2017/05/11 Python
python简单区块链模拟详解
2019/07/03 Python
python实现从wind导入数据
2019/12/03 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
Python中os模块功能与用法详解
2020/02/26 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
学前教育毕业生自荐信范文
2013/12/24 职场文书
学生党员思想汇报范文
2014/01/09 职场文书
建筑工地标语
2014/06/18 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
质量负责人岗位职责
2015/02/15 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书