php 实现tab切换_JavaScript_javascript回车完美实现tab切换功能，最经有一个项目是给化工厂做 - phpStudy...

javascript回车完美实现tab切换功能

最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据，使用的都是小键盘区，在以前都是通过excel录入数据的现在，

在网页上需要实现excel 那样的回车换行的功能在网上找了有关这方面的问题但是都不怎么好用，也有人提供了这方面的思路如何来做，

经过本人的整理和测试，能够很好的解决这个问题：

需要的条件

1，Jquery库地址可以到jquery.com官网上去下载最新的

2，查看界面表单的结构和相对应的表单位置

以下是一些才是表单结构

登录表单

1. 用户名

2. 用户名

3. 用户名

4. 用户名

5. 用户名

6. 用户名

7. 用户名

8. 用户名

9. 用户名

10. 密码

11. 记住我?

注意需要定位表单的上下文标签关系

http://images.cnitblog.com/i/461877/201403/131104380377939.jpg

生成页面以后不管标点元素在什么位置在何处 但是有一点结构式不变的label 元素后面就是我们要切换到表单元素并且 type="text"

那么通过Jquery的选择器 层级选择器prev+next 定位 不太了解的可以查看jquery 的帮助文档，只要能定位到要选择的元素即可用什么方式无所谓

一下是关键脚本代码：

$(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;//必须要写以免错误信息被提交

}

});

});

});

可以试试！！！希望对你们有所帮助相关阅读:

Win10正式版录音机在哪?怎么打开win10自带的录音机程序?

php采集内容中带有图片地址的远程图片并保存的方法

JavaScript实现的石头剪刀布游戏源码分享

整理HTML5移动端开发的常用触摸事件

MySQL存储引擎中的MyISAM和InnoDB区别详解

JavaScript定义类的几种方式总结

原生javascript实现的一个简单动画效果

Win10自带Groove音乐播放器怎么使用?

Android实现系统语言切换功能

解决RecycleView分割线不居中的三种方法

浅谈.NET中加密和解密的实现方法分享

网页右下角弹出窗体实现代码

javascript中FOREACH数组方法使用示例

深入浅析border和outline区别