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

我已经尝试手动给出输入autocomplete =“on”，但没有提交表单，浏览器无法知道应该何时存储这些值，所以这没有任何作用。

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

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

来源

2013-03-17 AmericanUmlaut

不确定如果我正确理解问题。这是否意味着您将在浏览器中加载信息，以便javascript将使用三个输入框中的信息在一些预加载的数据中执行查找？我看到的一些自动完成实现使用Ajax加载结果。这不适合你的模型，是吗？ – VKen 2013-03-19 22:14:43

在这里，尝试一个类似的问题提供的解决方案：http://stackoverflow.com/questions/8400269/browser-native-autocomplete-for-ajaxed-forms – sweetamylase 2013-03-19 22:23:30

@Ven我只是希望浏览器对待输入，就好像他们是已提交表单的一部分，因为用户将看到他们以前输入的值作为自动填充建议，而不实际提交表单。 – AmericanUmlaut 2013-03-20 07:36:38

测试了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()（从评论更新）

您需要在/内容返回一个空白页/空白得到&后（约：空白并没有为我，但情况因人而异工作）。

来源

2013-03-26 10:06:32 laktak

只是一个说明，没有必要定义一个内容/空白URL点iframe和form--将属性定义为about：blank对我来说工作正常。 – AmericanUmlaut 2013-03-26 19:35:02

仅供参考，这没有为我工作（也许是因为我尝试从铬扩展页）。我稍微修改了它，它确实有效：为提交按钮（称为“mySubmit”）设置可识别的类，然后代替$（“form”）。submit（）do $（“。mySubmit”）。click（）。 – 2014-03-20 04:37:16

+1，但如果使用'$（“form”）。submit（）;'，你不得不使用例如'$（“＃submit_button”）。click（）' – Legionar 2014-06-16 12:51:13

我还没有测试过这个，但它可能工作，如果你提交表单到一个隐藏的iframe（以便表单实际提交，但当前页面不重新加载）。

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

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

来源

2013-03-19 22:21:18 Alex

The解决方案为我工作（在铬43测试）。 – blazkovicz 2015-06-05 14:45:11

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

那么，问题是，浏览器处理这些名称differenetly。例如，这里是镀铬的正则表达式：

名字： “第一个*名称|缩写| FNAME |第一个$。”
电子邮件： “e.?mail”
地址（1号线）： “地址*线|地址1 | ADDR1 |街”
邮政编码： “拉链|邮政|交*代码| P码|^1Z $”

而Chrome也使用x-autocompletetype，所以你可以自定义名称，并把一个自动完成类型，但我相信这不适用于自定义域..

Here is chrome's experiment

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

嗯，这就是我可以帮助的。

来源

2013-03-21 23:59:00 aIKid

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

来源

2013-03-25 08:47:45 IJMorgado

没有提交Twitter Typeahead超过一年....也许https://select2.github.io/是任何好的... – matanster 2016-05-24 16:53:21

你可以使用jQuery当聚焦和聚焦时，在本地存储中保留自动完成数据自动完成到保留的值。

即

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

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

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

来源

2013-03-26 08:36:24

-1

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

来源

2014-07-09 22:09:36

我们知道，浏览器会保存其信息只有当表单提交，这意味着我们不能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() { 
    window.fetch('login.php', { 
     method: 'post', 
     body: new FormData(document.forms[0])) 
    }).then(function() { /* login completed */ }) 
    // no return false!! 
});

无JavaScript的支持

理想情况下，你应该让不支持JavaScript的形式工作太多，所以删除target和设定的动作，将收到您的表单的页面数据。

<form action="login.php">

，然后简单地通过JavaScript添加它，当你添加submit事件：

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

来源

2015-04-27 01:48:01

对于那些谁不愿意改变他们现有的表单功能，您可以用第二种形式接收的副本所有表单值，然后在主表单提交之前提交到空白页面。这是一个使用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，那么您必须更改about:blank的网址为https://about:blank。

来源

2015-06-01 22:49:30

https：// about：blank确实需要在Firefox中避免一些警告。我想知道是否有其他选项没有这个问题。也许javascript：void（0）？另外，提交另一个表单是否真的增加了浏览器对所有表单的自动完成？ – marcus 2017-02-21 12:57:42

-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-09 07:10:23

无需提交表单即可触发自动填充

回答

JavaScript示例

无JavaScript的支持

相关问题