在不提交表单的情况下触发自动完成 [英] Trigger autocomplete without submitting a form

问题描述

我正在编写一个非常简单的网络应用程序，其中包含三个文本输入.输入用于生成结果，但所有工作都是在 Javascript 中完成的，因此无需提交表单.我试图找到一种方法让浏览器存储输入值以进行自动完成，就像它们在提交的表单中一样.

我尝试手动输入 autocomplete="on"，但没有提交表单，浏览器无法知道何时应该存储值，所以这没有效果.

我还尝试将输入包装在具有 onSubmit="return false;" 的表单中，但阻止表单实际提交似乎也阻止了浏览器存储其输入的值.

当然可以手动使用 localStorage 或 cookie 来持久化输入，然后从中生成自动完成提示，但我希望找到一种解决方案，可以利用原生浏览器行为，而不是手动复制它.

解决方案

经 Chrome、IE 和 Firefox 测试:

<iframe id="remember" name="remember" class="hidden" src="/content/blank"></iframe><form target="remember" method="post" action="/content/blank"><字段集><label for="username">用户名</label><input type="text" name="username" id="username" value=""><label for="password">密码</label><input type="password" name="password" id="password" value=""></fieldset><button type="submit" class="hidden"></button></表单>

在您的 Javascript 中触发提交，例如$("form").submit(); $("#submit_button").click()(从评论更新)>

您需要在/content/blank 处返回一个空白页面以获取 &发布(关于:空白对我不起作用，但 YMMV).

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.

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.

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.

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.

解决方案

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>

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

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

这篇关于在不提交表单的情况下触发自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！