javascript - HTML的表单中如何做到敲回车触发type为button的按钮
本文介绍了javascript - 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的话,就不能实现敲回车自动触发按钮的功能了,我想做到在输入框里敲一下回车就自动触发登录的功能,请问该如何实现啊?
谢谢
解决方案
换回 type="submit"
,在 form 的 onsubmit
事件中触发 AJAX 请求,并 preventDefault()
就可以了。
这篇关于javascript - HTML的表单中如何做到敲回车触发type为button的按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文