javascript回車完美實現(xiàn)tab切換功能

更新時間：2014年03月13日 17:55:51 作者：

這篇文章主要介紹了javascript通過回車實現(xiàn)tab切換功能,需要的朋友可以參考下

最經有一個項目是給化工廠做的在使用的過程中需要輸入大量的數(shù)據(jù)，使用的都是小鍵盤區(qū)，在以前都是通過excel錄入數(shù)據(jù)的現(xiàn)在，

在網(wǎng)頁上需要實現(xiàn)excel 那樣的回車換行的功能在網(wǎng)上找了有關這方面的問題但是都不怎么好用，也有人提供了這方面的思路如何來做，

經過本人的整理和測試，能夠很好的解決這個問題：

需要的條件

1，Jquery庫地址可以到jquery.com官網(wǎng)上去下載最新的

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) {//到了最后一個的下一個可能找不到元素會出現(xiàn)異常通過try 捕捉不至于程序出現(xiàn)異常 
return false;//必須要寫以免錯誤信息被提交 
} 
return false;//必須要寫以免錯誤信息被提交 
} 
}); 
}); 
}); 
</script> 