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 相关文章推荐
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
JS动画效果打开、关闭层的实现方法
May 09 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 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
利用 window_onload 实现select默认选择
2006/10/09 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
php语法检查的方法总结
2019/01/21 PHP
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
python3 shelve模块的详解
2017/07/08 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
python 内置函数汇总详解
2019/09/16 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
python模拟实现分发扑克牌
2020/04/22 Python
python新手学习使用库
2020/06/11 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
房地产销售员的自我评价分享
2013/12/04 职场文书
《会变的花树叶》教学反思
2014/02/10 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
公司聘任书模板
2014/03/29 职场文书
副校长竞聘演讲稿
2014/09/01 职场文书
向国旗敬礼活动小结
2014/09/27 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP
Win10 Anaconda安装python-pcl
2022/04/29 Servers