当前位置:Gxlcms > JavaScript > javascript回车完美实现tab切换功能_javascript技巧

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

时间:2021-07-01 10:21:17 帮助过:7人阅读

最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据,使用的都是小键盘区,在以前都是通过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 的帮助文档,只要能定位到要选择的元素即可用什么方式无所谓

一下是关键脚本代码:
代码如下: