Javascript示例

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处返回空白页面以获取＆amp;帖子（关于：空白对我不起作用，但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>

Demo on JSfiddle (tested in 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-

代替使用iframe，您可以使用action =“ javascript：void（0）”，这样它就不会转到其他页面，并且自动完成功能会存储这些值。

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

Answer 5

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

Answer 6

从我搜索的内容来看，你似乎需要确定名称。一些标准名称，如“姓名”，“电子邮件”，“电话”，“地址”会自动保存在大多数浏览器中。

嗯，问题是，浏览器会区别地处理这些名称。例如，这是chrome的正则表达式：

名字：“first。* name |姓名缩写| fname | first $”
电子邮件：“e。？mail”
地址（第1行）：“地址。* line | address1 | addr1 | street”
zipcode：“zip | postal | post。* code | pcode | ^ 1z $”

但Chrome也使用autocomplete，因此您可以自定义名称并设置自动填充类型，但我相信这不适用于自定义字段..

Here is chrome's standard

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

嗯，这就是我所能提供的帮助。

Answer 7

对于那些不想更改现有表单功能的人，您可以使用第二个表单接收所有表单值的副本，然后在主表单提交之前提交到空白页面。这是一个完全可测试的HTML文档，使用JQuery Mobile演示解决方案。

<!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，则必须使用about:blank更改https://about:blank的网址。

Answer 8

您可以使用jQuery在焦点输出时将自动完成数据保留在localstorage中，并在焦点自动完成时保持持久化值。

即

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

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

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

Answer 9

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

Answer 10

你可以使用＆＃34;。＆＃34;在iframe src和form action中。

pig -useHCatalog

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

10 个答案:

Javascript示例

无JavaScript支持