javascript - 动态生成表单的浏览器 native 自动完成(使用 ajax 处理)

Question

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

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

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

• 您的输入字段 type="text" 必须有一个 name
• 必须提交表单<-- 在我的情况下这不是真的发生

我的分析是否正确，在这种情况下是否有任何方法可以使自动完成工作？

---

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

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一起玩。