Web页面Enter支持TAB键转换--提交数据

插曲:

自己负责的西城环保项目的登录页面,之前全部用鼠标和键盘操作,甚是不方便。

前天改为输入完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 οnlοad="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复杂 提供思路】

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值