javascript回车完美实现tab切换功能


Posted in Javascript onMarch 13, 2014

最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据,使用的都是小键盘区,在以前都是通过excel录入数据的现在,

在网页上需要实现excel 那样的回车换行的功能在网上找了有关这方面的问题但是都不怎么好用,也有人提供了这方面的思路如何来做,

经过本人的整理和测试,能够很好的解决这个问题:

需要的条件

1,Jquery库地址可以到jquery.com官网上去下载最新的

2,查看界面表单的结构和相对应的表单位置

以下是一些才是表单结构

<fieldset> 
<legend>登录表单</legend> 
<ol> 
<li> 
<asp:Label runat="server" AssociatedControlID="UserName">用户名</asp:Label> 
<asp:TextBox runat="server" ID="UserName" /> 
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage="用户名字段是必填字段。" /> 
</li> 
<li> 
<asp:Label runat="server" AssociatedControlID="UserName">用户名</asp:Label> 
<asp:TextBox runat="server" ID="TextBox1" /> 
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage="用户名字段是必填字段。" /> 
</li> 
<li> 
<asp:Label runat="server" AssociatedControlID="UserName">用户名</asp:Label> 
<asp:TextBox runat="server" ID="TextBox2" /> 
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage="用户名字段是必填字段。" /> 
</li> 
<li> 
<asp:Label runat="server" AssociatedControlID="UserName">用户名</asp:Label> 
<asp:TextBox runat="server" ID="TextBox3" /> 
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage="用户名字段是必填字段。" /> 
</li> 
<li> 
<asp:Label runat="server" AssociatedControlID="UserName">用户名</asp:Label> 
<asp:TextBox runat="server" ID="TextBox4" /> 
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage="用户名字段是必填字段。" /> 
</li> 
<li> 
<asp:Label runat="server" AssociatedControlID="UserName">用户名</asp:Label> 
<asp:TextBox runat="server" ID="TextBox5" /> 
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage="用户名字段是必填字段。" /> 
</li> 
<li> 
<asp:Label runat="server" AssociatedControlID="UserName">用户名</asp:Label> 
<asp:TextBox runat="server" ID="TextBox6" /> 
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage="用户名字段是必填字段。" /> 
</li> 
<li> 
<asp:Label runat="server" AssociatedControlID="UserName">用户名</asp:Label> 
<asp:TextBox runat="server" ID="TextBox7" /> 
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage="用户名字段是必填字段。" /> 
</li> 
<li> 
<asp:Label runat="server" AssociatedControlID="UserName">用户名</asp:Label> 
<asp:TextBox runat="server" ID="TextBox8" /> 
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage="用户名字段是必填字段。" /> 
</li> 
<li> 
<asp:Label runat="server" AssociatedControlID="Password">密码</asp:Label> 
<asp:TextBox runat="server" ID="Password" TextMode="Password" /> 
<asp:RequiredFieldValidator runat="server" ControlToValidate="Password" CssClass="field-validation-error" ErrorMessage="密码字段是必填字段。" /> 
</li> 
<li> 
<asp:CheckBox runat="server" ID="RememberMe" /> 
<asp:Label runat="server" AssociatedControlID="RememberMe" CssClass="checkbox">记住我?</asp:Label> 
</li> 
</ol> 
<asp:Button runat="server" CommandName="Login" Text="登录" /> 
</fieldset>

注意需要定位表单的上下文标签关系
http://images.cnitblog.com/i/461877/201403/131104380377939.jpg
生成页面以后不管标点元素在什么位置在何处 但是有一点结构式不变的label 元素后面就是我们要切换到表单元素并且 type="text"

那么通过Jquery的选择器 层级选择器prev+next 定位 不太了解的可以查看jquery 的帮助文档,只要能定位到要选择的元素即可用什么方式无所谓

一下是关键脚本代码:

<script type="text/javascript"> 
$(function () { 
var i = 0;//索引 
//以上的表单位置和上下文之间的关系就是label 后面总会有一个input 标签type 可能是Password 可能是text 或者是其他的 
//可以按照个人需求修改,这里只定位到type="text" 的表单如果是又有表单的话改成 $("label+ input") 即可按个人需求 
$("label+ :text").each(function () { 
$(this).keydown(function (e) { 
if (e.keyCode == 13) { 
i++;//下一个定位的索引 
try { 
$("label+ :text")[i].focus(); 
} catch (e) {//到了最后一个的下一个可能找不到元素会出现异常通过try 捕捉不至于程序出现异常 
return false;//必须要写以免错误信息被提交 
} 
return false;//必须要写以免错误信息被提交 
} 
}); 
}); 
}); 
</script>

可以试试!!!希望对你们有所帮助
Javascript 相关文章推荐
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 #Javascript
JQuery中extend使用介绍
Mar 13 #Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 #Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 #Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 #Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 #Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 #Javascript
You might like
计数器详细设计
2006/10/09 PHP
php面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
关于Laravel-admin的基础用法总结和自定义model详解
2019/10/08 PHP
5 cool javascript apps
2007/03/24 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
vue踩坑记录之数组定义和赋值问题
2019/03/20 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
Python实现从URL地址提取文件名的方法
2015/05/15 Python
学习python类方法与对象方法
2016/03/15 Python
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
Python自动生产表情包
2017/03/17 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
对Python字符串中的换行符和制表符介绍
2018/05/03 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
网络工程专业毕业生推荐信
2013/10/28 职场文书
心理健康教育心得体会
2013/12/29 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
交通事故检查书范文
2014/01/30 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
人事任命书格式
2014/06/05 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis