快捷導(dǎo)航

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

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

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

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

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

經(jīng)過(guò)本人的整理和測(cè)試，能夠很好的解決這個(gè)問(wèn)題：

需要的條件

1，Jquery庫(kù)地址可以到j(luò)query.com官網(wǎng)上去下載最新的

2，查看界面表單的結(jié)構(gòu)和相對(duì)應(yīng)的表單位置

以下是一些才是表單結(jié)構(gòu)

復(fù)制代碼代碼如下:

 
<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> 

注意需要定位表單的上下文標(biāo)簽關(guān)系
http://images.cnitblog.com/i/461877/201403/131104380377939.jpg
生成頁(yè)面以后不管標(biāo)點(diǎn)元素在什么位置在何處但是有一點(diǎn)結(jié)構(gòu)式不變的label 元素后面就是我們要切換到表單元素并且 type="text"

那么通過(guò)Jquery的選擇器層級(jí)選擇器prev+next 定位不太了解的可以查看jquery 的幫助文檔，只要能定位到要選擇的元素即可用什么方式無(wú)所謂

一下是關(guān)鍵腳本代碼：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$(function () { 
var i = 0;//索引 
//以上的表單位置和上下文之間的關(guān)系就是label 后面總會(huì)有一個(gè)input 標(biāo)簽type 可能是Password 可能是text 或者是其他的 
//可以按照個(gè)人需求修改，這里只定位到type="text" 的表單如果是又有表單的話改成 $("label+ input") 即可按個(gè)人需求 
$("label+ :text").each(function () { 
$(this).keydown(function (e) { 
if (e.keyCode == 13) { 
i++;//下一個(gè)定位的索引 
try { 
$("label+ :text")[i].focus(); 
} catch (e) {//到了最后一個(gè)的下一個(gè)可能找不到元素會(huì)出現(xiàn)異常通過(guò)try 捕捉不至于程序出現(xiàn)異常 
return false;//必須要寫(xiě)以免錯(cuò)誤信息被提交 
} 
return false;//必須要寫(xiě)以免錯(cuò)誤信息被提交 
} 
}); 
}); 
}); 
</script> 