js点击回车登录

落日映苍穹つ 2022-12-08 01:31 172阅读 0赞

明明是后端开发，现在天天写前端，vue写了又写jsp然后又写jquery，呜呜呜 ( Ĭ ^ Ĭ )

//登录按钮，绑定loginbtn事件
    <button id="loginbtn">登 陆</button>
    
    
    //jquery方法，写在  $(function()里面
    // 声明一个提交表单的方法
            var ensure = function () {
                var account = $("#account").val();
                var password = $("#password").val();
                if (account == "" || password == "") {
                    alert("输入正确信息");
                    return;
                }
                //提交表单
                $.ajax({
                    url: "/login",
                    type: "post",
                    dataType: "json",
                    data: {
                        loginname: account,
                        password: password
                    },
                    success: function (result) {
                        console.log(result);
                        if (result.code == 200) {
                            window.location.href = "success";
                        } else {
                            alert(result.message);
                        }
                    }
                })
            }
    
    
    //回车键触发登录点击
    $(document).keydown(function (e) {
                if (e.keyCode == 13) {
             //按下鼠标后，需要按两次回车才能提交，增加该行可以直接提交表单，然后按一下就可以了
                    e.preventDefault();
                    // $("#mouse").click();
                    $("#loginbtn").click()
                }
            });
    
            // $("#loginbtn").on("click", ensure)
    
    //点击登录
    $("#loginbtn").click(ensure)

完整代码

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8"/>
        <title>登陆页面</title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
    
        <style>
            body {
                background-color: #EEEEE0;
            }
    
            .box {
                text-align: center;
                height: 350px;
                margin-top: 10%;
            }
    
            .row {
                margin-bottom: 30px;
                height: 40px;
            }
    
            .row input {
                width: 320px;
                height: 40px;
                padding: 0 15px;
                border-radius: 5px;
                border: 1px solid #acacac;
            }
    
            .row button {
                width: 352px;
                height: 42px;
                background-color: #409eff;
                color: white;
                border-radius: 5px;
                border: 0;
            }
    
            .row button:hover {
                background-color: teal;
                cursor: pointer;
            }
    
            .row button:active {
                background-color: green;
                cursor: pointer;
            }
    
            .lastRow {
                width: 352px;
                font-size: 14px;
                color: gray;
                margin-left: 450px;
            }
    
            .lastRow a {
                text-decoration: none;
                color: #409eff;
            }
    
            .lastRow input {
                width: 20px;
                height: 10px;
                /*padding: 0 15px;*/
                border-radius: 5px;
                border: 1px solid #acacac;
            }
    
            .leftSpan {
                float: left;
                color: #409eff;
            }
    
            .rightSpan {
                float: right;
            }
    
        </style>
    </head>
    
    <body>
    
    <div class="box">
        <div class="row">
            <h1>登陆</h1>
        </div>
        <div class="row">
            <input id="account" type="text" placeholder="输入账号"/>
        </div>
        <div class="row">
            <input id="password" type="password" placeholder="输入密码"/>
        </div>
        <div class="row">
            <button id="loginbtn">登 陆</button>
        </div>
    
        <div class="lastRow">
            <div class="leftSpan">
                <input id="remind" type="radio">记住密码
            </div>
    
            <div class="rightSpan">
                <a href="#">免费注册</a>|
                <a href="#">找回密码</a>
            </div>
        </div>
    
    </div>
    </body>
    
    <script>
    
    
        $(function () {
    
            // 声明一个提交表单的方法
            var ensure = function () {
                var account = $("#account").val();
                var password = $("#password").val();
                if (account == "" || password == "") {
                    alert("输入正确信息");
                    return;
                }
                //提交表单
                $.ajax({
                    url: "/login",
                    type: "post",
                    dataType: "json",
                    data: {
                        loginname: account,
                        password: password
                    },
                    success: function (result) {
                        console.log(result);
                        if (result.code == 200) {
                            window.location.href = "success";
                        } else {
                            alert(result.message);
                        }
                    }
                })
            }
    
    
            // document.onkeydown=function(event){
            //     var e = event || window.event || arguments.callee.caller.arguments[0];
            //
            //     if(e.keyCode==13){ // 按 enter
            //         //要做的事情，即调用查询方法
            //         ensure;
            //     }
            // }
    
    
            $(document).keydown(function (e) {
                if (e.keyCode == 13) {
                    //按下鼠标后，需要按两次回车才能提交，增加该行可以直接提交表单，然后按一下就可以了
                    e.preventDefault();
                    // $("#mouse").click();
                    $("#loginbtn").click()
                }
            });
    
            // $("#loginbtn").on("click", ensure)
    
            $("#loginbtn").click(ensure)
    
    
    
            $("#remind").on("click", function () {
                    if (this.value == 1) {
                        this.value = 0;
                        this.checked = 0;
                    } else {
                        this.value = 1;
                    }
                }
            )
    
    
        })
    </script>
    
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Njk3OTc4_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1Njk3OTc4_size_16_color_FFFFFF_t_70]: /images/20221123/1a1fde7491274f2a91532e1a897c15cb.png