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>

可以試試！！！希望對你們有所幫助

QQ:1273704678

Emial:[e-mail]