脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-javascript 回车实现 tab 切换功能完美解决，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据，使用的都是小键盘区，在以前都是通过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>
复制代码
注意需要定位表单的上下文标签关系
生成页面以后不管标点元素在什么位置在何处 但是有一点结构式不变的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>
复制代码
可以试试！！！希望对你们有所帮助
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-javascript 回车实现 tab 切换功能完美解决全部内容，希望文章能够帮你解决javascript代码实例教程-javascript 回车实现 tab 切换功能完美解决所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。