57

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

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

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

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

4

10 回答 10

41

用 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 返回一个空白页面以获取和发布（about:blank 对我不起作用，但 YMMV）。

于 2013-03-26T10:06:32.443 回答
18

我们知道浏览器只有在提交表单时才会保存它的信息，这意味着我们不能用return falseor取消它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">

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

formElement.target = '';
formElement.action = 'about:blank';
于 2015-04-27T01:48:01.903 回答
5

我还没有对此进行测试，但是如果您将表单提交到隐藏的 iframe（以便实际提交表单但不会重新加载当前页面），它可能会起作用。

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

<form target="my_iframe" action="about:blank" method="get">...</form>
于 2013-03-19T22:21:18.367 回答
5

---没有框架---

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

<form action="javascript:void(0)">
    <input type="text" name="firstName" />
    <button type="submit">Submit</button>
</form>
于 2020-02-06T02:26:42.827 回答
2

也许你可以使用这个Twitter Typeahead ...是一个非常完整的自动完成实现，具有本地和远程预取，这利用 localStorage 来持久化结果，并且它在输入元素中显示一个提示......代码是易于理解，如果您不想使用完整的 jquery 插件，我认为您可以看一下代码以了解如何实现您想要的...

于 2013-03-25T08:47:45.607 回答
1

根据我搜索的内容.. 似乎您需要识别名称。大多数浏览器会自动保存一些标准名称，例如“姓名”、“电子邮件”、“电话”、“地址”。

好吧，问题是，浏览器处理这些名称的方式不同。例如，这是 chrome 的正则表达式：

  • 名字：“first.*name|首字母|fname|first$”
  • 电子邮件：“e.?mail”
  • 地址（第 1 行）：“地址。*line|address1|addr1|street”
  • 邮编：“邮编|邮政|邮政。*code|pcode|^1z$”

但是 chrome 也使用autocomplete，因此您可以自定义名称并输入自动完成类型，但我相信这不适用于自定义字段..

这是chrome的标准

这在 IE、Opera 和 Mozilla 中是另一回事。现在，您可以在那里尝试 iframe 解决方案，以便您可以提交它。（也许这是半标准的）

好吧，这就是我能提供的全部帮助。

于 2013-03-21T23:59:00.347 回答
1

当 focusout 和 focusin 时，您可以使用 jQuery 将自动完成数据持久保存在 localstorage 中，它会自动完成持久化的值。

IE

$(function(){
 $('#txtElement').on('focusout',function(){
   $(this).data('fldName',$(this).val());
 }

 $('#txtElement').on('focusin',function(){
   $(this).val($(this).data('fldName'));
 }
}

您还可以根据您的应用程序要求将持久性逻辑绑定到其他事件上。

于 2013-03-26T08:36:24.583 回答
1

对于那些不想更改现有表单功能的人，您可以使用第二个表单来接收所有表单值的副本，然后在提交主表单之前提交到空白页面。这是一个使用 JQuery Mobile 演示解决方案的完全可测试的 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函数只需要在您的主表单提交按钮上调用。如果您有提交表单的脚本函数，请在调用之后进行save_autofill调用。hidden_form您的主表单中的每个文本框都必须有一个命名文本框。

如果您的站点使用 SSL，那么您必须将 URL 更改为about:blankwith https://about:blank。

于 2015-06-01T22:49:30.597 回答
-1

确保您通过 POST 提交表单。如果您通过 ajax 提交，请<form autocomplete="on" method="post">忽略该action属性。

于 2014-07-09T22:09:36.067 回答
-1

您可以使用 ”。” 在 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>
于 2016-12-09T07:10:23.497 回答