轻松实现ajax登录时让浏览器保存密码

将登录页面由form提交改为ajax提交，发现一个副作用——登录时浏览器不会提示是否保存密码，这样每次登录都要输入用户名/密码。

html代码如下：

<script>
$(function () {
    $('#signin').bind('click', function () {
        //ajax提交代码
    });
});
</script>
<div class="block">
    <label>登录用户名</label>
    <input type="text" id="loginName" value=""/>
</div>
<div class="block">
    <label>密码</label>
    <input type="password" id="password" value="" />
</div>
<div class="block">
    <input type="button" id="signin"  />
</div>

这个副作用让人甚是郁闷。

后来揣摩了一下，估计浏览器是根据表单提交事件来决定是否提示保存密码。试试欺骗一下浏览器，有form，有submit按钮，但在onsubmit时return false。

于是html代码改在了这样：

<form method="post" onsubmit="return false;">
    <div class="block">
        <label>登录用户名</label>
        <input type="text" id="loginName" value=""/>
    </div>
    <div class="block">
        <label>密码</label>
        <input type="password" id="password" value="" />
    </div>
    <div class="block">
        <input type="submit" id="signin"  />
    </div>
</form>

改完之后一试，问题竟然如此轻松地被解决了，嘿嘿。。。