无需提交表单即可触发自动填充 [英] Trigger autocomplete without submitting a form

问题描述

我正在写一个带有三个文本输入的非常简单的web应用程序。输入用于生成结果，但所有工作都是使用Javascript完成的，因此不需要提交表单。我试图找到一种方法让浏览器存储自动完成的输入值，就像它们在提交的表单中一样。

I am writing a very simple web app with three text inputs. The inputs are used to generate a result, but all the work is done in Javascript, so there is no need to submit a form. I'm trying to find a way to get the browser to store input values for autocomplete as it would if they were in a form that was submitted.

我试过给手动输入autocomplete =on，但没有提交表单的情况下，浏览器无法知道应该何时存储这些值，所以这不起作用。

I have tried giving the inputs autocomplete="on" manually, but without a form to submit, the browser has no way of knowing when it should store the values, so this has no effect.

我也尝试用onSubmit =return false;的形式包装输入，但是阻止表单实际提交也会阻止浏览器存储其输入值。

I have also tried wrapping the inputs in a form that has onSubmit="return false;", but preventing the form from actually submitting appears to also prevent the browser from storing its inputs' values.

当然可以手动使用localStorage或cookie来保存输入，然后从这些输入生成自动完成提示，但是我希望找到一个解决方案，可以切换到本地浏览器行为，而不是手动复制它。

It is of course possible to manually use localStorage or a cookie to persist inputs and then generate autocomplete hints from those, but I'm hoping to find a solution that taps into native browser behavior instead of duplicating it by hand.

推荐答案

使用Chrome，IE和Firefox进行测试：

Tested with Chrome, IE and Firefox:

<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触发器中， $（＃submit_button）。click（） $（form）。 code>（从评论更新）

In your Javascript trigger the submit, e.g. $("form").submit(); $("#submit_button").click() (updated from comments)

您需要在/ content / blank处返回一个空白页面以获取&后（约：空白不适合我，但YMMV）。

You need to return an empty page at /content/blank for get & post (about:blank didn't work for me but YMMV).

这篇关于无需提交表单即可触发自动填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！