触发自动填充而不提交表单

Question

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

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

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

当然可以手动使用localStorage或cookie来持久保存输入,然后从这些提示中生成自动完成提示,但我希望找到一种能够利用本机浏览器行为而不是手动复制它的解决方案.

Answer 1

使用Chrome,IE和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触发提交,例如 $("form").submit(); $("#submit_button").click() (根据评论更新)

你需要在/ content/blank返回一个空页面来获取和发布(关于:空白对我来说不起作用,但YMMV).

Answer 2

我们知道浏览器只在提交表单时保存其信息,这意味着我们无法用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中测试)

优于目前接受的答案:

• 更短的代码;
• 没有jQuery;
• 没有加载服务器端页面;
• 没有额外的JavaScript;
• 不需要额外的课程.

没有额外的JavaScript.您通常submit会将一个处理程序附加到表单事件以发送XHR,而不是取消它.

Javascript示例

// for modern browsers with window.fetch
document.forms[0].addEventListener('submit', function (event) {
    fetch('login.php', {
        method: 'post',
        body: new FormData(event.target))
    }).then(r => r.text()).then(() => { /* login completed */ })
    // no return false!!
});

没有javascript支持

理想情况下,您应该让表单在没有javascript的情况下工作,因此请删除target并将操作设置为将接收表单数据的页面.

<form action="login.php">

然后在添加submit事件时通过javascript添加它:

formElement.target = '';
formElement.action = 'about:blank';

Answer 3

我没有对此进行测试,但如果您将表单提交给隐藏的iframe(以便实际提交表单但不重新加载当前页面),它可能会有效.

<iframe name="my_iframe" src="about:blank"></iframe>

<form target="my_iframe" action="about:blank" method="get">...</form>

Answer 4

---没有 IFRAME---

您可以使用 action="javascript:void(0)" 而不是使用 iframe，这样它就不会转到另一个页面并且自动完成将存储值。

<form action="javascript:void(0)">
    <input type="text" name="firstName" />
    <button type="submit">Submit</button>
</form>