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>複製代碼可以試試！！！希望對你們有所協助