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获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
JS随机漂浮广告代码具体实例
Nov 19 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
AngularJS控制器继承自另一控制器
May 09 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
vue实现微信分享功能
Nov 28 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 Javascript
Vue组件模板的几种书写形式(3种)
Feb 19 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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
Jquery 插件开发笔记整理
2011/01/17 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
canvas的神奇用法
2017/02/03 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
Django获取应用下的所有models的例子
2019/08/30 Python
python创建n行m列数组示例
2019/12/02 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
幼儿园家长会欢迎词
2014/01/09 职场文书
投资建议书模板
2014/05/12 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
法人身份证明书
2015/06/18 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers
改造DE1103三步曲
2022/04/07 无线电