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的一些特性和用法整理小结
Jan 13 Javascript
js操作select控件的几种方法
Jun 02 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
Jan 15 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
js简单实现图片延迟加载的方法
Jul 19 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
js里面的变量范围分享
Jul 18 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调用三种数据库的方法(2)
2006/10/09 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
javascript instanceof,typeof的区别
2010/03/24 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
Python smallseg分词用法实例分析
2015/05/28 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
Django rest framework实现分页的示例
2018/05/24 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
安全生产管理合理化建议书
2014/03/12 职场文书
爱情寄语大全
2014/04/09 职场文书
运动会口号8字
2014/06/07 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
检讨书之工作不认真
2019/08/14 职场文书
教你使用Python pypinyin库实现汉字转拼音
2021/05/27 Python
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python