HTML的表单中如何做到敲回车触发type为button的按钮-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

2016-03-12 14:08:56 2967 1
   <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的话,就不能实现敲回车自动触发按钮的功能了,我想做到在输入框里敲一下回车就自动触发登录的功能,请问该如何实现啊?

取消 提交回答
全部回答(1)
  • 南极熊218
    2019-07-17 19:00:45

    监听页面的键盘事件,比如keyup,keydown,keypress.如果按了回车,手动提交表单

    0 0
相关问答

3

回答

@aliyun.com邮箱客户端密码登录方式 下线通知

仙游 2015-01-16 14:33:54 126167浏览量 回答数 3

145

回答

【新手入门】云服务器linux使用手册

fanyue88888 2012-11-26 17:14:18 157652浏览量 回答数 145

110

回答

OSS存储服务-客户端工具

newegg11 2012-05-17 15:37:18 295465浏览量 回答数 110

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 146021浏览量 回答数 31

5

回答

公司给开的企业邮箱帐户,为什么用foxmail会提示密码错误?

萝卜兔兔 2015-07-13 10:27:30 144032浏览量 回答数 5

33

回答

Win Server 2003-2016 加密勒索事件必打补丁合集

妙正灰 2017-05-15 10:44:38 280356浏览量 回答数 33

42

回答

【精品问答集锦】Python热门问题

小六码奴 2019-05-30 15:27:34 136871浏览量 回答数 42

82

回答

OSS入门教程

belle.zhoux 2014-07-07 17:14:27 151375浏览量 回答数 82

1

回答

foxmail 关联企业邮箱提示邮箱地址或者密码错误

2017-12-30 21:50:39 151091浏览量 回答数 1

249

回答

阿里云LNAMP(Linux + Nginx + Apache + MySQL + PHP)环境一键安装脚本

云代维 2014-02-14 15:26:06 305580浏览量 回答数 249
+关注
0
文章
14879
问答
问答排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载