程序博客网 > 滴滴ios虚拟定位软件

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

来源：互联网 发布：滴滴ios虚拟定位软件 编辑：程序博客网 时间：2024/06/16 08:53

插曲：

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

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

滴滴ios虚拟定位软件 滴滴ios虚拟定位软件
原创粉丝点击
热门IT博客
正版办公软件价格正版办公软件价格
心知天气api怎么用心知天气api怎么用
卖家网的数据准确吗
身份证相片制作软件
牛津通识读本 知乎
卖淘宝店铺有什么风险
为什么凌晨五点醒 知乎
淘宝店铺招牌是哪里
如何用为知笔记做批注
java换行符
阿里云国际版怎么支付
上市银行现金流数据
软件测试找不到工作
吉利知豆d3上市时间
无硅油洗发水排行知乎
软件安全评估方法
淘宝信用借贷额度
制作壁纸的软件
北师珠网络登录
淘宝什么是一块包邮
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 志愿脱档怎么办 高考报考脱档怎么办 报考大学脱档怎么办? 单位倒闭职工怎么办 档案资料不全怎么办 怎么办北京集体户口 新生儿奶疹子怎么办 公派出国档案怎么办 档案缺失怎么办 没档案怎么办退休 高中档案丢失怎么办 人事档案失效了怎么办 我没有人事档案怎么办 教育局不放人怎么办 学生档案丢失怎么办 入党材料造假怎么办 档案袋撕开了怎么办 民营企业退休怎么办 档案没有合并怎么办 辞职信拒签怎么办 物业违约怎么办 商场不续签怎么办 小区保安嚣张怎么办 员工不想加班怎么办 下属不愿意加班怎么办 入职要毕业证怎么办 自考没有毕业证怎么办 办离职手续怎么办 试用期意外怀孕怎么办 工作调动职称怎么办 试用期教师怀孕怎么办 前端试用期不过怎么办 事业单位考上博士怎么办? 事业编违法怎么办 报到证没办怎么办 事业单位离职社保怎么办 事业单位离职养老保险怎么办 国企裸辞后户口怎么办 裸辞后户口怎么办 组织部管理干部企业破产怎么办 档案失业状态怎么办

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里