Question

我注意到在提交表单之前浏览器不存储表单值，这意味着如果您使用的是AJAX而不是标准表单提交，则不会填充浏览器的自动填充。有没有办法强制填充你的浏览器自动填充/自动完成，以便我可以通过AJAX提交的表单方便吗？去我的AJAX页面并且每次都必须在表单字段中输入相同的内容是很烦人的，因为浏览器不记得它们。

我的问题与this one完全相同，只是在FireFox中只提供了一个解决方案，作为该问题的可接受答案。我正在寻找适用于所有主流浏览器（至少Chrome，FF和IE）的解决方案（如果有的话）。

注意：我不是在谈论AJAX自动完成插件，这是在谷歌搜索这个问题时几乎总是弹出的。我说的是您的浏览器内置的自动填写或自动填充，可以帮助您记住您过去输入的内容来填写表单。

Answer 1

我也遇到过这个;似乎没有一个很好的解决方案，当然不是一个跨浏览器，但这里有一个IE浏览器我还没有看到有人提到：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT>
function subForm()
{
window.external.AutoCompleteSaveForm(f1);
f1.submit();
}
</script>
</HEAD>
<BODY>
<FORM id=f1>
User ID : <input type=text name=id></input><br>
Password :<input type=password name=pw></input><br>
E-mail :<input type = text VCARD_NAME = "vCard.Email"> <br>
<input type=button value=submit onclick="subForm()">
</FORM>
</BODY>
</HTML>

来自：http://support.microsoft.com/kb/329156

Answer 2

对于仍在尝试解决这个问题的人来说，似乎我找到了answer。

Chromium会尝试识别提交事件，即使您阻止默认并自行处理实际提交。

是的，您需要{{1>} 提交事件，不点击事件。

在撰写本文时，这适用于Chrome，Edge和IE 11（我太懒了，不能在Firefox上下载和测试它）。这是你的表格：

preventDefault

注意<form method="POST" id="my-form"> <label>Email</label> <input autocomplete="email" type="email" name="email"> <button type="submit">Subscribe</button> </form>属性。这些是您可以用于autocomplete的所有possible values。

在JavaScript中，只需执行以下操作：

autocomplete

浏览器会记住您点击订阅按钮时输入的任何电子邮件。

Answer 3

您是否尝试过我提到的问题的答案？答案是使用隐藏的iframe，但似乎他声称这个想法在那个时候不适用于IE和Chrome。

尝试采用这个想法，而不是使用隐藏的iframe，只需将用户名/密码/提交可见输入元素放在iframe中的表单POST中。因此，用户将直接在iframe中输入登录详细信息。使用正确的Javascript，您可以放置加载图像，获取成功或拒绝服务器并更新父页面或整个页面。我相信它应该适用于任何浏览器。

或者如果你仍然想使用AJAX，因为你可能在服务器端实现了API。您可以使iframe只发送一个虚拟POST，同时将真实用户/传递发送到AJAX URL。

或者使用隐藏的iframe，不要隐藏它，而是将其移动到top: -1000px这样的隐身区域。

Answer 4

使用此方法：

AutoCompleteSaveForm = function(form){
    var iframe = document.createElement('iframe');
    iframe.name = 'uniqu_asdfaf';
    iframe.style.cssText = 'position:absolute; height:1px; top:-100px; left:-100px';
    document.body.appendChild(iframe);
    var oldTarget = form.target;
    var oldAction = form.action;
    form.target = 'uniqu_asdfaf';
    form.action = '/favicon.ico';
    form.submit();
    setTimeout(function(){
        form.target = oldTarget;
        form.action = oldAction;
        document.body.removeChild(iframe);
    });
}

使用ie10测试，ff最新，chrome最新

测试自己：http://jsbin.com/abuhICu/1

Answer 5

经过几个小时的搜索，我在Trigger autocomplete without submitting a form找到了一个解决方案。

基本上，它在同一页面中使用隐藏的iframe，将表单的操作设置为iframe的'src'，并在用户单击触发AJAX请求的按钮时在表单中添加隐藏的提交按钮，您应该在发送AJAX请求之前以编程方式单击隐藏按钮。见下面的例子：

在您的表单页面中：

<iframe id="hidden_iframe" name="hidden_iframe" class="hidden" src="/content/blank"></iframe>
<form target="hidden_iframe" method="post" action="/content/blank" class="form-horizontal">
    <input type="text" name="name">
    <input type="text" name="age">
    ....
    <button id="submit_button" type="submit" class="hidden"></button>
    <button id="go_button" type="submit" class="hidden">Go</button>
</form>

然后是java脚本：

$('#go_button').click(function(event){
    //submit the form to the hidden iframe
    $('#submit_button').click(); 
    //do your business here
    $.ajax(function(){
        //whatever you want here
    }})
);

希望这有帮助。

使用AJAX调用时如何存储到浏览器自动完成/自动填充

5 个答案: