javascript回車完美實現tab切換功能

 這篇文章主要介紹了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>    注意需要定位表單的上下文標簽關系  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) {//到了最後一個的下一個可能找不到元素會出現異常通過try 捕捉不至於程序出現異常  return false;//必須要寫以免錯誤信息被提交  }  return false;//必須要寫以免錯誤信息被提交  }  });  });  });  </script>    可以試試！！！希望對你們有所幫助