动态生成表单的浏览器本机自动完成功能（使用 ajax 处理）答案

【问题标题】：browser native autocomplete for dynamically generated forms (handled with ajax)动态生成表单的浏览器本机自动完成功能（使用 ajax 处理）
【发布时间】：2012-01-14 01:49:40
【问题描述】：

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

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

我认为您需要满足几个要求才能使本机自动完成功能正常工作：

您的输入字段type="text" 必须有一个name
必须提交表单

我的分析正确吗？在这种情况下，有什么方法可以让自动完成功能发挥作用吗？

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

【问题讨论】：

标签： javascript html autocomplete

【解决方案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 可以玩。

【讨论】：

聪明，我喜欢。我想知道为什么我没有想到这一点：P 我认为iframe 不起作用，但显然它可以！
实际上有两种不同的情况：使用 AJAX 提交的表单和动态生成的表单（也可能使用 AJAX 提交）。 jsbin 示例仅涵盖第一个。
你能详细说明发生了什么吗？通过在 iframe 中提交表单而不是直接提交，我们可以获得什么？我认为我们要解决的问题是如何使用 AJAX 而不是普通的表单提交机制来提交表单。就我而言，我必须提交 JSON。服务器将不接受正常的表单编码（例如 application/x-www-form-urlencoded）。
吉利，这不是问题。问题是如果您使用 AJAX 提交它，那么浏览器将不会记住将来自动完成的值。这个问题不涉及使用 ajax 提交表单。它假定您已经这样做了，并希望让浏览器将值存储在其自动完成历史记录中。
有人在大型网站的生产环境中使用过这个吗？使用这种方法有什么陷阱吗？作为一项安全措施，如果您要提交敏感数据，请记住向表单添加一个不是 get 值的方法属性！

【解决方案2】：

DMoses 解决方案极大地启发了我的解决方案，但它有很大的不同，所以我认为制作我自己的解决方案是个好主意，不过奖励给了 DMoses：P

DMoses 解决方案将表单移动（或复制）到 iframe，然后提交。你想这样做的原因是你的“父母”不会重新加载。有一个更简单的解决方案：将表单提交到 iframe。这同样适用，您不必复制任何节点。

此步骤也是完全可重复的。唯一的缺点是您无法控制何时添加自动完成条目。您可能只想添加 valid 条目，但至少这种情况完美地模仿了不涉及 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/

【讨论】：

感谢您的赏金！我想知道如果大多数浏览器仍然添加该值，您是否返回 HTTP 500？如果它很重要，可能值得一试。
我认为这并不重要。我发布到的页面无论如何都不是真实页面 (javascript:false)，只是有一个空闲页面总是返回 500 只是为了让它工作是不确定的。
在当前的浏览器中，我似乎无法让它工作：jsfiddle.net/KzF6s
我认为你是对的。这个解决方案也停止了对我的工作。
我将我的解决方案添加到您的 jsbin 中，它适用于 chrome。所以看起来你现在可能必须实际提交。 jsfiddle.net/KzF6s/1

【解决方案3】：

在 cmets 中对其他答案的变通办法进行了一些处理之后，我决定为任何可以等待浏览器正确处理此问题的人制作此列表。

因此，总而言之，这些浏览器版本支持 使用 JavaScript 生成的表单上的自动完成值：

火狐 25
Chrome 33（当前版本为 31，即将推出）
Internet Explorer 11 (reference)

【讨论】：