HTML的表单中如何做到敲回车触发type为button的按钮

发布于 2022-09-02 14:36:11 字数 2022 浏览 44 评论 0

    <form>
        <div class="form-group">
            <label for="username" class="col-md-2 control-label">姓名</label>
            <div class="col-md-10">
                <input type="text" class="form-control" id="username" placeholder="请输入你的名字">
            </div>
        </div>
        <div class="form-group">
            <label for="password" class="col-md-2 control-label">密码</label>
            <div class="col-md-10">
                <input type="password" class="form-control" id="password" placeholder="请输入密码">
            </div>
        </div>
        <button type="button" onclick="login()" style="width: 70%;margin: 5rem auto 3rem;" class="center-block btn btn-primary btn-raised">登录</button>
    </form>

网页中有如上的一个form表单,其中的button的type是button而不是submit

然后login函数是这样的:

function login() {
        var username=$("#username").val();
        var password=$("#password").val();
        if (username == "") {
            alert("请输入姓名");
            return;
        }
        if (password == "") {
            alert("请输入密码");
            return;
        }
        $.ajax({
            url: "api/login",
            type: "get",
            data: {
                username:username,
                password:password
            }
        }).done(function (data) {
            if (data == 'success') {
                location.href='index.html';
            }else if (data == 'wrong password') {
                alert("您输入的密码有误");
                $("#password").val('');
            }else if (data == 'wrong username') {
                alert("您输入的用户名不存在");
                $("#username").val('');
            }
        }).fail(function () {
            alert("获取信息失败");
        });
    }

因为是通过ajax请求服务器来实现登录的,所以我没有用button type="submit",但是现在问题是如果type是button的话,就不能实现敲回车自动触发按钮的功能了,我想做到在输入框里敲一下回车就自动触发登录的功能,请问该如何实现啊?

谢谢

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

萝莉病 2022-09-09 14:36:11

换回 type="submit",在 form 的 onsubmit 事件中触发 AJAX 请求,并 preventDefault() 就可以了。

感情旳空白 2022-09-09 14:36:11

方法挺多的,说两个吧
1.改成 submit 然后 preventDefault
2.就用 button 然后监听 keyboard 的按键

但可醉心 2022-09-09 14:36:11

可以在输入框添加onKeyDown事件来捕获回车,判断keyCode在事件里调用login()。

橘寄 2022-09-09 14:36:11

输入框.onkeyup = function(event){
if(event.keyCode == 13){

 form.submit();

}
};
回车的时候,用onkeyup事件,监听按下的是不是回车,如果是回车,提交表单。
event.keyCode输出按下健的那个什么码;回车是13;

苍景流年 2022-09-09 14:36:11

angularjs扩展了form的功能,自带这种功能

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文