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

最新推荐文章于 2020-12-31 04:47:43 发布

饅頭

最新推荐文章于 2020-12-31 04:47:43 发布

阅读量1.2k

点赞数

分类专栏： UI：DIV+CSS - HTML Asp.net 网站编程文章标签： web stylesheet function javascript null class

本文链接：https://blog.csdn.net/zjfei/article/details/5590111

版权

Asp.net 网站编程同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

UI：DIV+CSS - HTML

8 篇文章 0 订阅

订阅专栏

插曲：

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

前天改为输入完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>

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

//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();">

<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>