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 相关文章推荐
利用json获取字符出现次数的代码
Mar 22 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
JavaScript逻辑运算符相关总结
Sep 04 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
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
js中的push和join方法使用介绍
2013/10/08 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
深入理解JQuery循环绑定事件
2016/06/02 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
让python在hadoop上跑起来
2016/01/27 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
python中必要的名词解释
2019/11/20 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
食品营养与检测应届生求职信
2013/11/08 职场文书
手机业务员岗位职责
2013/12/13 职场文书
合同专员岗位职责
2013/12/18 职场文书
目标管理责任书
2014/04/15 职场文书
幼师求职自荐信
2014/05/31 职场文书
创先争优标语
2014/06/27 职场文书
国际贸易系求职信
2014/08/09 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
卖车协议书范文
2016/03/23 职场文书
创业计划书之网吧
2019/10/10 职场文书
基于python实现银行管理系统
2021/04/20 Python
Vue的过滤器你真了解吗
2022/02/24 Vue.js