动态生成表单的浏览器本机自动完成(使用ajax处理)

Question

我正在动态生成一个表单.为简单起见,假设它是带有电子邮件/密码的登录表单.表单已提交,但是在提交时会触发一个处理实际登录的AJAX请求,并取消提交事件(e.preventDefault()).

我e.preventDefault()用来取消表单的默认操作,即转到'action'中的页面,但这似乎也取消了浏览器的自动完成检测.

我认为您需要满足本机自动完成的几个要求才能工作:

• 您的输入字段type="text"必须包含name
• 表格必须提交< - 在我的情况下这并不是真的发生

我的分析是否正确,是否有办法在这种情况下自动完成工作？

---

为了避开粉丝:我不是在寻找任何涉及jQuery或[插入你的框架]的解决方案,我想使用本机浏览器自动完成功能.我没有自动填写的单词列表.

Answer 1

好吧,我找到了一个令人费解的方式来做到这一点:

这是javascript:

function ajaxit() {
    var iFrameWindow = document.getElementById("myframe").contentWindow;
    iFrameWindow.document.body.appendChild( document.getElementById("myform").cloneNode(true));   
    var frameForm = iFrameWindow.document.getElementById("myform");
    frameForm.onsubmit = null;
    frameForm.submit();
    return false;
}

这是html:

<form id="myform" onsubmit="return ajaxit();" autocomplete="on">
    <input id="foo" name="foo"/> 
    <input type="submit" />
</form>
<iframe id="myframe" src=""></iframe> <!-- you'll want this hidden -->

单击"提交"将运行ajaxit()方法.该方法在iframe中创建相同的表单,并将其提交给服务器.您可以搭载提交以执行服务器请求,也可以执行单独的ajax请求并忽略iframe.

我知道这很难看,但它确实有效.

编辑:这是一个jsbin玩.

Answer 2

DMoses解决方案极大地激发了我的解决方案,但它有一个显着的差异,所以我认为制作我自己的解决方案是一个好主意,但赏金归于DMoses:P

DMoses解决方案将表单移动(或复制)到iframe,然后提交它.你想要这样做的原因是你的'父母'不会重新加载.有一个更简单的解决方案:将表单提交给iframe.这工作原理相同,您不必复制任何节点.

这一步也是完全可重复的.唯一的缺点是您无法控制何时添加完全自动完成条目.您可能只想添加有效的条目,但至少这种情况完全模仿了正常形式在没有涉及ajax时的行为方式.如果要控制添加到自动填充的内容,请使用DMoses的解决方案,复制表单并在iframe中提交.

对我来说,这就足够了:

<form onsubmit="return ajaxit();" autocomplete="on" target="the_iframe">
    <input id="foo" name="foo"/> 
    <input type="submit" />
</form>
<iframe id="the_iframe" name="the_iframe" src="javascript:false"></iframe> <!-- you'll want this hidden -->

最好的部分:不需要额外的JavaScript来完成这项工作!(除了为表单生成唯一的ID /名称,但这非常简单).

jsFiddle:http://jsfiddle.net/KzF6s/13/