触发自动完成而不提交表单
我正在写一个非常简单的三个文本input的Web应用程序。 input用于生成结果，但所有的工作都是用Javascript完成的，所以不需要提交表单。 我试图find一种方法来让浏览器存储自动完成的input值，就像它们在提交的表单中一样。
我已经尝试手动给inputautocomplete =“on”，但没有提交表单，浏览器无法知道应该何时存储这些值，所以这没有任何作用。
我也尝试用onSubmit =“return false;”的forms包装input，但是阻止表单实际提交也阻止浏览器存储其input值。
当然可以手动使用localStorage或者一个cookie来保存input，然后从这些提示中生成自动完成的提示，但是我希望find一个解决scheme，可以切换到本地浏览器的行为，而不是手工复制。
经过Chrome，IE和Firefox的testing：
<iframe id="remember" name="remember" class="hidden" src="/content/blank"></iframe> <form target="remember" method="post" action="/content/blank"> <fieldset> <label for="username">Username</label> <input type="text" name="username" id="username" value=""> <label for="password">Password</label> <input type="password" name="password" id="password" value=""> </fieldset> <button type="submit" class="hidden"></button> </form> 在你的Javascript触发提交，例如 $("form").submit(); $("#submit_button").click() （从评论更新）
你需要返回一个空的页面/内容/空白获取和发布（关于：空白不适合我，但YMMV）。
我们知道浏览器只有在提交表单的时候才会保存它的信息，这意味着我们不能用return false或者e.preventDefault()来取消它，
我们可以做的是使其无需重新加载页面就可以将数据提交到任何地方。 我们可以用iframe来做到这一点
<iframe name="💾" style="display:none" src="about:blank"></iframe> <form target="💾" action="about:blank"> <input name="user"> <input name="password" type="password"> <input value="Login" type="submit"> </form>
JSfiddle演示（在IE9，Firefox，Chrome中testing）
赞成目前接受的答案：
- 较短的代码;
- 没有jQuery;
- 没有加载服务器端页面;
- 没有额外的JavaScript;
- 不需要额外的课程。
没有额外的JavaScript。 您通常附加一个处理程序到表单的submit事件发送XHR， 不要取消它。
Javascript的例子
// for modern browsers with window.fetch document.forms[0].addEventListener('submit', function () { window.fetch('login.php', { method: 'post', body: new FormData(document.forms[0])) }).then(function () { /* login completed */ }) // no return false!! });
没有JavaScript的支持
理想情况下，您应该让表单在没有JavaScript的情况下工作，所以删除target并将操作设置为将接收表单数据的页面。
<form action="login.php">
然后，当你添加submit事件时，只需通过JavaScript添加它：
formElement.target = '💾'; formElement.action = 'about:blank';
我没有testing过这个，但是如果你把表单提交给一个隐藏的iframe（这样表单实际上被提交，但是当前页面没有被重新加载），它可能会工作。
<iframe name="my_iframe" src="about:blank"></iframe> <form target="my_iframe" action="about:blank" method="get">...</form>
也许你可以使用这个Twitter Typeahead …是一个非常完整的自动完成实现，具有本地和远程预取，这使用localStorage来坚持结果，也显示input元素提示…代码是容易理解，如果你不想使用完整的jQuery插件，我想你可以看看代码看看如何实现你想要的…
从我搜查..看来你需要确定的名称。 一些标准名称，如“名称”，“电子邮件”，“电话”，“地址”会自动保存在大多数浏览器中。
那么，问题是，浏览器处理这些名称differenetly。 例如，这里是铬的正则expression式：
- 名字：“first。* name |首字母| fname | first $”
- 电子邮件：“e.?mail”
- 地址（第1行）：“address。* line | address1 | addr1 | street”
- 邮政编码：“邮政|邮政|邮政。*代码| pcode | ^ 1z $”
但铬也使用x-autocompletetype ，所以你可以自定义名称，并把一个自动完成types，但我相信这不是自定义字段..
这是Chrome的实验
而在IE，Opera和Mozilla中则是另一回事。 现在，您可以尝试在那里的iframe解决scheme，所以你可以提交它。 （也许这是一个半标准的东西）
那么，这就是我所能帮助的。
对于那些不想更改现有表单function的用户，可以使用第二个表单来接收所有表单值的副本，然后在主表单提交之前将其提交到空白页面。 这是一个使用JQuery Mobile演示解决scheme的完全可testing的HTML文档。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" /> <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <form method="post"> <input type="text" name="email" /> <input type="submit" value="GO" onclick="save_autofill(this);" /> </form> <script> function save_autofill(o) { $(':input[name]', $('#hidden_form')).val(function () { return $(':input[name=' + this.name + ']', $(o.form)).val(); }); $('#hidden_form').find("input[type=submit]").click(); } </script> <iframe name="hidden_iframe" style="display:none"></iframe> <form target="hidden_iframe" id="hidden_form" action="about:blank" style="display:none"> <input type="text" name="email" /> <input type="submit" /> </form> </body> </html>
save_autofill函数只需要在你的主表单提交button上调用。 如果您有提交表单的脚本函数，请在save_autofill调用之后放置该调用。 您的主窗体中的每个窗体都必须在hidden_form具有一个已命名的文本框。
如果您的网站使用SSL，则必须使用https://about:blank更改about:blank的URL。
您可以使用jQuery在本地存储中保留自动完成数据，当聚焦和自动完成时，它将自动完成保存的值。
即
$(function(){ $('#txtElement').on('focusout',function(){ $(this).data('fldName',$(this).val()); } $('#txtElement').on('focusin',function(){ $(this).val($(this).data('fldName')); } }
您还可以根据您的应用程序要求绑定其他事件的持久性逻辑。
确保您通过POST提交表单。 如果您通过ajax提交，请执行<form autocomplete="on" method="post"> ，省略action属性。
您可以使用 ”。” 在iframe src和表单动作。
<iframe id="remember" name="remember" style="display:none;" src="."></iframe> <form target="remember" method="post" action="."> <input type="text" id="path" size='110'> <button type="submit" onclick="doyouthing();">your button</button> </form>
