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 相关文章推荐
一个原生的用户等级的进度条
Jul 03 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
Jul 03 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
jQuery实现tag便签去重效果的方法
Jan 20 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
vue element项目引入icon图标的方法
Jun 06 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 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
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
浅谈js中的闭包
2015/03/16 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
Python实现的检测网站挂马程序
2014/11/30 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
python生成ppt的方法
2018/06/07 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
Python模块常用四种安装方式
2020/10/20 Python
Julep官网:美容产品和指甲油
2017/02/25 全球购物
我们是伦敦女孩:WalG
2018/01/08 全球购物
行政副总岗位职责
2014/02/23 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
如何用python清洗文件中的数据
2021/06/18 Python
React列表栏及购物车组件使用详解
2021/06/28 Javascript
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript