优化的思想是模拟from的submit的行为, 这样浏览器容易提示保存密码;
用button按钮模拟submit行为, 但其实是调用一个函数
示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="javascript:doLogin();" method="post" id="loginForm">
<!-- 在这里调用doLogin()函数 -->
<div>
<input type="text" id="username" placeholder="请输入您的用户名" class="input">
</div>
<div>
<input type="password" id="password" placeholder="请输入您的密码" class="input">
</div>
<div>
<button class="login" onclick="document.getElementById('loginForm').submit();">登录</button>
<!-- 这里模拟表单的submit行为 -->
</div>
</form>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
//函数: 用于进行登录操作
function doLogin() {
username = $('#username').val()
password = $('#password').val()
$.post("{:url('index/user/doLogin')}", {
'username': username,
'password': password,
}, function (res) {
if (res == 'wrongPasssword') {
layer.msg("密码错误");
} else if (res == 'noUserName') {
layer.msg("用户名不存在");
} else {
window.location.href = res
}
})
}
//监听: 当在用户名和密码框按回车
$(".input").keypress(function (e) {
if (e.which == 13) {
$('.login').click() //当在input里按下回车时, 模拟点击登录按钮
}
});
</script>
</html>