javascript回车完美实现tab切换功能
javascript通过回车实现tab切换功能,最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据,使用的都是小键盘区,在以前都是通过excel录入数据的现在,
在网页上需要实现excel 那样的回车换行的功能在网上找了有关这方面的问题但是都不怎么好用,也有人提供了这方面的思路如何来做,
经过本人的整理和测试,能够很好的解决这个问题:
需要的条件
1,Jquery库地址可以到jquery.com官网上去下载最新的
2,查看界面表单的结构和相对应的表单位置
以下是一些才是表单结构
<legend>登录表单_www.jbxue.com</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 的帮助文档,只要能定位到要选择的元素即可用什么方式无所谓
一下是关键脚本代码:
$(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;//必须要写以免错误信息被提交
} www.jbxue.com
return false;//必须要写以免错误信息被提交
}
});
});
});
</script>
javascript回车完美实现tab切换功能的更多相关文章
- vue实现tab切换功能
最近用vue做一个页面的tab功能,经过一查找资料,没用路由,也没用动态组件,完美实现了tab切换功能,效果如下 下面是代码实现,这是模板 <article id="example&q ...
- javascript 回车实现 tab 切换功能完美解决
最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据,使用的都是小键盘区,在以前都是通过excel录入数据的现在, 在网页上需要实现excel 那样的回车换行的功能在网上找了有关这方面的问题但 ...
- vue实现tab切换功能精简版
<template> <div> <p class="tabs" v-for="(list,index) in lists" :c ...
- html+css+jQuery+JavaScript实现tab自动切换功能
tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- JavaScript的Tab切换
在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...
- 很好用的Tab标签切换功能,延迟Tab切换。
一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...
- JS 实现 Tab标签切换功能
Tab标签切换 效果图: HTML部分: <div class="wrap"> <ul id="tag"> < ...
- javascript学习教程之---如何从一个tab切换到banner幻灯片的转换
一个简单的tab切换代码: <!doctype html> <html> <head> <meta charset="utf-8"> ...
- JavaScript学习笔记2之Tab切换
1.Tab切换简写版1 页面布局如下: <div id="tab"> <h1 id="title"> <span class=&q ...
随机推荐
- poj 2632 Crashing Robots
点击打开链接 Crashing Robots Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 6655 Accepted: ...
- oracle行列转换函数的使用
oracle 10g wmsys.wm_concat行列转换函数的使用: 首先让我们来看看这个神奇的函数wm_concat(列名),该函数可以把列值以","号分隔起来,并显示成一行 ...
- [CF 474E] Pillars (线段树+dp)
题目链接:http://codeforces.com/contest/474/problem/F 意思是给你两个数n和d,下面给你n座山的高度. 一个人任意选择一座山作为起始点,向右跳,但是只能跳到高 ...
- jmeter接口自动化,你敢想,我敢玩
飞测说:大家好,我是黑夜小怪,今天我又来了分享了.最近用jmeter比较多,做过自动化测试的都知道,我们脚本和数据维护是你十分头疼的事情,刚好黑夜小怪我最近接触到一个项目的接口测试,今天我们一起分享下 ...
- DAY13 Matlab实现图像错切源代码
Matlab实现图像错切源代码 %错切im=(imread('robot.jpg'));im1=rgb2gray(im);figure,imshow(im1);[row,col]=size(im1); ...
- Android开发-API指南-数据存储
Storage Options 英文原文:http://developer.android.com/guide/topics/data/data-storage.html 采集日期:2015-02-0 ...
- 洛谷P1473 零的数列 Zero Sum
P1473 零的数列 Zero Sum 134通过 170提交 题目提供者该用户不存在 标签USACO 难度普及/提高- 提交 讨论 题解 最新讨论 路过的一定帮我看错了我死了- 题目描述 请考虑 ...
- 记录网上资源URL
FQ(使用路由器): http://kennylee26.iteye.com/blog/1887753 http://www.iteye.com/search?type=all&query=s ...
- Android入门之GridView(表格控件)
GridView是一个表格控件,可以在每个单元格中显示自定义的View或者字符串.在这里我们要实现一个图标下方有文字的效果. 1.首先我们应自定义布局文件image_text.xml.代码如下: &l ...
- 堆栈的实现(c语言)
#include <stdio.h> #include <stdlib.h> #include <stdbool.h> #define EmptyTOS (-1) ...