Ajax登录浏览器不提示记住密码的优化方案[jQuery]

{{ time }}

优化的思想是模拟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>