HTML的表单中如何做到敲回车触发type为button的按钮
<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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
换回
type="submit"
,在 form 的onsubmit
事件中触发 AJAX 请求,并preventDefault()
就可以了。方法挺多的,说两个吧
1.改成 submit 然后 preventDefault
2.就用 button 然后监听 keyboard 的按键
可以在输入框添加onKeyDown事件来捕获回车,判断keyCode在事件里调用login()。
输入框.onkeyup = function(event){
if(event.keyCode == 13){
}
};
回车的时候,用onkeyup事件,监听按下的是不是回车,如果是回车,提交表单。
event.keyCode输出按下健的那个什么码;回车是13;
angularjs扩展了form的功能,自带这种功能