首頁 > 其他

Web頁面Enter支援TAB鍵轉換–提交資料

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

插曲：

自己負責的西城環保項目的登入頁面，之前全部用滑鼠和鍵盤操作，甚是不方便。

前天改為輸入完username、password後，按斷行符號鍵驗證使用者登入。期間可以和鍵盤的TAB鍵配合使用，效果更好。

今天經理又要全部使用Enter操作整個流程，我發現就Baidu的登入有使用外，Google、Yahoo、Sina都沒有使用，

畢竟那樣不合習慣。但經理一發話，我一個基層員工就得照做呀，除非我自己是老闆，O(∩_∩)O~

摘要：

我現在以常見的WEB登入頁面為案例，講解Enter鍵如何支援TAB鍵轉換及提交資料。

假設登入頁面為login.htm，裡面有<body>、<form>、<input type="*">等控制項。

現在需求是登入頁面username自動擷取焦點，然後按Enter焦點自動移到password裡，

最後按Enter提交驗證使用者資料登入。

本文代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
    <title>系統登入</title>
    <link href="css/login.css" rel="stylesheet" type="text/css" />

    <script src="JS/DialogJS/ymPrompt.js" type="text/javascript"></script>

    <link rel="stylesheet" id='skin' type="text/css" href="JS/DialogJS/skin/qq/ymPrompt.css" />

    <script src="JS/jquery-1.3.2.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">
    <!--
        var jq = jQuery.noConflict();
        jq(function() {
            jq('#btnCancel').click(function() {
                jq("#myName").val("");
                jq("#myPsd").val("");
            });
            jq('#btnLogin').click(function() {
                var name = jq('#myName').val();
                var psd = jq('#myPsd').val();
                if (name == '')
                    ymPrompt.alert('使用者名稱不可為空！', null, null, '提示資訊', null);
                else {
                    //登入資訊
                    jq.ajax({
                        type: "GET",
                        data: { UserName: name, UserPsd: psd },
                        url: "tree.aspx?mode=LoginOn",
                        dataType: "json",
                        cache: false,
                        success: function(data) {
                            if (data.Success == "true") {
                                location = "Default.aspx";
                            }
                            else
                                ymPrompt.errorInfo('您輸入的使用者名稱或密碼有誤！', null, null, '錯誤資訊', null);
                        }
                    });
                }
                ymPrompt.close();
            });
        })

        function GetEnterFocus() {
            document.getElementById("myName").focus();
            document.getElementById("myName").select();
            document.getElementById("myName").onkeyup = GetNextInput;
            document.getElementById("myPsd").onkeyup = GetNextInput;
        }

        function GetNextInput() {
            if (event.keyCode == 13) {
                if (event.srcElement == document.getElementById("myName")) {
                    document.getElementById("myPsd").focus();
                    document.getElementById("myPsd").select();
                }
                if (event.srcElement == document.getElementById("myPsd")) {
                    event.returnValue = false;
                    event.cancel = true;
                    document.getElementById("btnLogin").click();
                    return false;
                }
            }
        } 

        //Enter提交帳號密碼
//        function document.onkeydown() {
//            if (event.keyCode == 13) {
//                event.returnValue = false;
//                event.cancel = true;
//                document.getElementById("btnLogin").click();
//                return false;
//            }
//        }
        -->
    </script>
</head>
<body onload="javascript:GetEnterFocus();">
<!--action="Login.htm" method="post"-->
<form id="form1">
<table width="100%" height="254" border="0" cellspacing="0">
    <tr>
        <td height="21">
            <input type="text" id="myName" class="dengluming" />
        </td>
    </tr>
    <tr>
        <td height="21">
            <input type="password" id="myPsd" class="dengluming" />
        </td>
    </tr>
    <tr>
        <td height="49">
            <table border="0" cellspacing="0" style="margin-left: 235px">
                <tr>
                    <td>
                        <a href="#" id="btnLogin" class="login_btn">登 錄</a>
                    </td>
                    <td>
                        <a href="#" id="btnCancel" class="login_btn">取 消</a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</form>
</body>
</html>

【感謝goodsong（風捲殘雲~不要把簡單的事搞得N複雜 提供思路】

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More