>用户点击“登录”
>登录表单HTML使用AJAX加载并显示在页面上的DIV中
>用户在字段中输入用户/传递并单击提交。它不是< form> – 用户/传递通过AJAX提交
>如果用户/通行正常,页面重新加载与用户登录。
>如果用户/通行证是坏的,页面不重新加载,但错误消息出现在DIV中,用户再次尝试。
这里的问题:浏览器从不提供通常的“保存此密码?是/从不/不现在”提示,它对其他网站。
我试着包装< div> in< form>标签的“autocomplete =’on’”,但没有什么区别。
谢谢
埃里克
p.s.添加到我的问题,我肯定使用存储密码的浏览器,我从来没有点击“从不为这个网站”…这是一个技术问题,浏览器没有检测到它是一个登录表单,而不是操作符错误:-)
有两件事要知道:
>触发“保存密码”和
>恢复保存的用户名/密码
1.触发“保存密码”:
对于Firefox 21,当检测到包含输入文本字段的表单和提交的输入密码字段时,将触发“保存密码”。所以我们只需要使用
$('#loginButton').click(someFunctionForLogin); $('#loginForm').submit(function(event){event.preventDefault();});
someFunctionForLogin()执行ajax登录和重新加载/重定向到登录页面,而event.preventDefault()阻止由于提交表单的原始重定向。
如果您仅处理Firefox,上述解决方案就足够了,但它在Chrome 27中无法正常工作。然后您会询问如何在Chrome 27中触发“保存密码”。
对于Chrome 27,通过提交包含具有属性name =’username’的输入文本字段和具有属性name =’password’的输入密码字段的表单,“保存密码”在被重定向到页面后被触发。因此,我们不能阻止重定向由于提交表单,但我们可以进行重定向后,我们已经完成了ajax登录。 (如果你希望ajax登录不重新加载页面或不重定向到页面,不幸的是,我的解决方案不工作)。然后,我们可以使用
<form id='loginForm' action='signedIn.xxx' method='post'> <input type='text' name='username'> <input type='password' name='password'> <button id='loginButton' type='button'>Login</button> </form> <script> $('#loginButton').click(someFunctionForLogin); function someFunctionForLogin(){ if(/*ajax login success*/) { $('#loginForm').submit(); } else { //do something to show login fail(e.g. display fail messages) } } </script>
带有type =’button’的按钮将使得在单击按钮时不提交表单。
然后,将一个函数绑定到按钮以进行ajax登录。最后,调用$(‘#loginForm’)。submit();重定向到登录页面。如果登录的页面是当前页面,则可以用当前页面替换’signedIn.xxx’以进行’刷新’。
现在,你会发现,Chrome 27的方法也适用于Firefox 21。所以最好使用它。
2.恢复保存的用户名/密码:
如果你已经将loginForm硬编码为HTML,那么你会发现没有问题在loginForm中恢复已保存的密码。
但是,如果使用js / jquery动态创建loginForm,则保存的用户名/密码将不会绑定到loginForm,因为保存的用户名/密码仅在文档加载时绑定。
因此,您需要将loginForm硬编码为HTML,并使用js / jquery动态移动/显示/隐藏loginForm。
备注:
如果你做ajax登录,不要在标签表单中添加autocomplete =’off’
<form id='loginForm' action='signedIn.xxx' autocomplete='off'>
autocomplete =’off’将使恢复用户名/密码进入loginForm失败,因为你不允许’自动填充’用户名/密码。