动态生成表单的浏览器本机自动完成(使用 ajax 处理) [英] browser native autocomplete for dynamically generated forms (handled with ajax)

问题描述

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

I am dynamically generating a form. For simplicity's sake assume it's a login form with email/password. The form is submitted, but onsubmit it fires an AJAX request that handles the actual login and the submit event is cancelled (e.preventDefault()).

我用e.preventDefault()取消了表单的默认动作，也就是去'action'中的页面但是这个好像也取消了浏览器的自动完成检测.

I use e.preventDefault() to cancel the default action of the form, that is, go to the page in 'action' but this also seems to cancel the autocomplete detection of the browser.

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

I think you need to fullfill several requirements for the native autocomplete to work:

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

• Your input field type="text" must have a name
• The form must be submitted <-- this isn't really happening in my case

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

Is my analysis correct and is there any way to make autocomplete work in this case?

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

To ward off the fanboys: I'm not looking for any solution that involves jQuery or [insert your framework], I want to use the native browser autocomplete feature. I don't have a list of words that I want to autocomplete with.

推荐答案

DMoses 解决方案极大地启发了我的解决方案，但它有很大的不同，所以我认为制作自己的解决方案是个好主意，赏金归 DMoses虽然 :P

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 解决方案将表单移动(或复制)到 iframe，然后提交.你想这样做的原因是你的父母"不会重新加载.有一个更简单的解决方案:将表单提交到 iframe.其工作原理相同，您无需复制任何节点.

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.

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

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.

对我来说，这就够了:

<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/名称，但这非常简单).

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/

这篇关于动态生成表单的浏览器本机自动完成(使用 ajax 处理)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！