当前位置：文江博客话题详情

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

发布于 2024-12-19 22:07:50 字数 528 浏览 0 评论 0原文

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

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

我认为您需要满足本机自动完成功能的几个要求：

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

我的分析正确吗？有什么方法可以让自动完成在这种情况下工作吗？

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

千笙结 2024-12-26 22:07:50

好的，我找到了一种复杂的方法来执行此操作：

这是 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 。

Ok i found a convoluted way to do this:

Here is the 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;
}

Here is the 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 -->

Clicking submit will run the ajaxit() method. the method creates the same form in an iframe, and submits it to the server. You can either piggyback that submit to do your server request or you can do a separate ajax request and ignore the iframe.

I know that it's ugly, but it works.

EDIT: Here is a jsbin to play with.

回复收藏 0 原文

过度放纵 2024-12-26 22:07:50

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/

DMoses solution greatly inspired my solution but it there is a significant difference so I thought it would be a good idea to make my own solution, the bounty goes to DMoses though :P

DMoses solution moves (or copies) the form to the iframe and then submits it. The reason you want to do this is so your 'parent' from doesn't reload. There is a simpler solution: have the form submit to the iframe. This works just the same and you don't have to copy any nodes.

This step is entirely repeatable as well. The only downside is that you don't control when exactly an autocomplete entry is added. You might want to add only valid entries but at least this case mimics perfectly the way a normal form would behave if no ajax were involved. If you want to control what gets added to the autocomplete, use DMoses' solution, copy the form and submit it in the iframe.

For me, this is enough:

<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 -->

The best part: no extra JavaScript is required to make this work! (other than generating a unique id/name for the form, but that's super trivial).

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

回复收藏 0 原文

偏爱自由 2024-12-26 22:07:50

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

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

FireFox 25
Chrome 33（当前版本为 31，即将推出）
Internet Explorer 11 ( <一href="http://blogs.msdn.com/b/ieinternals/archive/2009/09/10/troubleshooting-stored-login-problems-in-ie.aspx" rel="nofollow">参考）