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下组织javascript代码(js函数化)
Aug 25 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
详解JavaScript的BUG和错误
May 07 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
JavaScript 实现下雪特效的示例代码
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
PHP数据集构建JSON格式及新数组的方法
2012/11/07 PHP
PHP多进程编程实例
2014/10/15 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
bootstrap table小案例
2016/10/21 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
详解Python3定时器任务代码
2019/09/23 Python
通过实例了解python property属性
2019/11/01 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
Python加速程序运行的方法
2020/07/29 Python
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
static关键字的用法
2013/10/07 面试题
自我介绍演讲稿
2014/01/15 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
咖啡店创业计划书
2014/08/15 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
python 提取html文本的方法
2021/05/20 Python